将图像对齐到同一行的文本左侧 - Twitter Bootstrap3

Question

目前我在同一行上有一个段落标题和右侧的图像:

<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>

这很好 - 内容标题和图像在同一行.但是,当我将图像放在内容标题div之前时,它们不再在同一行上.这就是我想要达到的目标 - 图像然后内容标题 - 在同一条线上.

Answer 1

使用Twitter Bootstrap类可能是最佳选择:

• 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 2

从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 3

你可以使用浮动:

<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 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>