Html Bootstrap 将图像与文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22640175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Align Image with text
提问by rikket
I am trying to align an image on the left side with text using boostrap, and when page is viewed on mobile devices the images becomes centred on top of the text !
我正在尝试使用 boostrap 将左侧的图像与文本对齐，并且当在移动设备上查看页面时，图像会居中在文本的顶部！
<div class="container">
<div class="row">
<h1>About Me</h1>
</class>
<div class="col-md-4">
<div class="imgAbt">
<img width="220" height="220" src="img/me.jpg">
</div>
</div>
<div class="col-md-8"><p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p></div>
</div>
</div>
I have also tried .col-md-3 .col-md-pull-9along with .col-md-9 .col-md-push-3, however I still was not able to achieve desired results, similar to this design
我也曾尝试.col-md-3 .col-md-pull-9沿.col-md-9 .col-md-push-3，但我还是没能达到预期的效果，类似这样的设计
回答by SW4
You have two choices, either correct your markup so that it uses correct elements and utilizes the Bootstrap grid system:
您有两种选择，要么更正您的标记，使其使用正确的元素并利用 Bootstrap 网格系统：
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<div class="container">
<h1>About Me</h1>
<div class="row">
<div class="col-md-4">
<div class="imgAbt">
<img width="220" height="220" src="img/me.jpg" />
</div>
</div>
<div class="col-md-8">
<p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
</div>
</div>
</div>Or, if you wish the text to closely wrap the image, change your markup to:
或者，如果您希望文本紧密环绕图像，请将标记更改为：
@import url('http://getbootstrap.com/dist/css/bootstrap.css');<div class="container">
<h1>About Me</h1>
<div class="row">
<div class="col-md-12">
<img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/me.jpg" />
<p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
</div>
</div>回答by WhiteLine
use the grid-systemof boostrap, more information here
使用网格系统的自举，更多的信息在这里
for example
例如
<div class="row">
<div class="col-md-4">here img</div>
<div class="col-md-4">here text</div>
</div>
in this way when the page will shrink the second div(the text) will be found under the first(the image)
这样，当页面缩小时，将在第一个（图像）下找到第二个 div（文本）
回答by Sparkz
Try using .pull-left to left align image along with text.
尝试使用 .pull-left 将图像与文本左对齐。
Ex:
前任：
<p>At the time all text elements goes here.At the time all text elements goes here. At the time all text elements goes here.<img src="images/hello-missing.jpg" class="pull-left img-responsive" style="padding:15px;" /> to uncovering the truth .</p>
回答by user7462729
i am a new bee ;p . And i faced the same problem. And the solution is BS Media objects. please see the code..
我是一只新蜜蜂；p。我遇到了同样的问题。解决方案是 BS Media 对象。请看代码..
<div class="media">
<div class="media-left media-top">
<img src="something.png" alt="@l!" class="media-object" width="20" height="50"/>
</div>
<div class="media-body">
<h2 class="media-heading">Beside Image</h2>
</div>
</div>
回答by H?ng Hà
<div class="container">
<h1>About Me</h1>
<div class="row">
<div class="col-md-4">
<div class="imgAbt">
<img width="100%" height="100%" src="img/me.jpg" />
</div>
</div>
<div class="col-md-8">
<p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
</div>
</div>
</div>回答by Nirvana 11b
<div class="container">
<h1>About me</h1>
<div class="row">
<div class="pull-left ">
<img src="http://lorempixel.com/200/200" class="col-lg-3" class="img- responsive" alt="Responsive image">
<p class="col-md-4">Lots of text here... </p>
</div>
</div>
</div>
</div>
回答by Ashish
I think this is helpful for you
我认为这对你有帮助
<div class="container">
<div class="page-header">
<h1>About Me</h1>
</div><!--END page-header-->
<div class="row" id="features">
<div class="col-sm-6 feature">
<img src="http://lorempixel.com/200/200" alt="Web Design" class="img-circle">
</div><!--END feature-->
<div class="col-sm-6 feature">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
</div><!--END feature-->
</div><!--end features-->
</div><!--end container-->
