将图像与同一行上的文本左侧alignment – Twitter Bootstrap

目前，我有一个段落标题和一个形象在右边，在同一行：

<div class="paragraphs"> <div class="row"> <div class="span4"> <div class="content-heading"><h3>Experience &nbsp </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之前时，它们不再在同一行上。 这是我想要实现的 – 图像然后内容标题 – 在同一行。

Answer 1

你可以使用浮动：

 <div class="paragraphs"> <div class="row"> <div class="span4"> <img style="float:left" src="../site/img/success32.png"/> <div class="content-heading"><h3>Experience &nbsp </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> 

之后。

Answer 2

使用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 &nbsp </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> 

Answer 3

从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

Answer 4

对于Bootstrap 3。

 <div class="paragraphs"> <div class="row"> <div class="col-md-4"> <div class="content-heading clearfix media"> <h3>Experience &nbsp </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> 

Answer 5

我会使用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> 

Answer 6

使用嵌套列

要使用默认网格嵌套您的内容，请在现有的.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>