将图像与同一行上的文本左侧alignment – Twitter Bootstrap
目前，我有一个段落标题和一个形象在右边，在同一行：
<div class="paragraphs"> <div class="row"> <div class="span4"> <div class="content-heading"><h3>Experience   </h3><img src="../site/img/success32.png"/></div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div> 这工作正常 – 内容标题和图像是在同一行。 但是，当我把图像放在content-heading div之前时，它们不再在同一行上。 这是我想要实现的 – 图像然后内容标题 – 在同一行。
你可以使用浮动：
<div class="paragraphs"> <div class="row"> <div class="span4"> <img style="float:left" src="../site/img/success32.png"/> <div class="content-heading"><h3>Experience   </h3></div> <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div>
如果你想要下面的<p>也停留在同一行，请删除它
style="clear:both"
但是你应该添加
<div style="clear:both"></div>
之后。
使用Twitter Bootstrap类可能是最好的select：
-
pull-left使元素左移 -
clearfix允许元素包含浮动元素（如果尚未通过其他类设置）
<div class="paragraphs"> <div class="row"> <div class="span4"> <div class="clearfix content-heading"> <img class="pull-left" src="../site/img/success32.png"/> <h3>Experience   </h3> </div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div>
从Bootstrap v3.3.0开始，您可以使用.media-left和.media-body
<div class="media"> <span class="media-left"> <img src="../site/img/success32.png" alt="..."> </span> <div class="media-body"> <h3 class="media-heading">Experience</h3> ... </div> </div>
文档： https ： //getbootstrap.com/docs/3.3/components/#media
对于Bootstrap 3。
<div class="paragraphs"> <div class="row"> <div class="col-md-4"> <div class="content-heading clearfix media"> <h3>Experience   </h3> <img class="pull-left" src="../site/img/success32.png"/> </div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div>
我会使用Bootstrap的网格来达到预期的效果。 class =“img-responsive”很好地工作。 就像是：
<div class="container-fluid"> <div class="row"> <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive" alt="Some picture" width="410" height="307"></div> <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div> </div> </div>
使用嵌套列
要使用默认网格嵌套您的内容，请在现有的.col-sm- *列中添加一个新的.row和一组.col-sm- *列。 嵌套行应包含一组最多不超过12个的列（不要求您使用全部12个可用列）。
<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>
