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

Align image to left of text on same line - Twitter Bootstrap3

提问by MattSull

Currently I have a paragraph heading and an image to its right, on the same line:

目前，我在同一行有一个段落标题和一个右侧图像：

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

This works fine - the content-heading and the image are on the same line. However, when I put the image before the content-heading div, they are no longer on the same line. This is what I want to achieve - image then content-heading - on the same line.

这工作正常 - 内容标题和图像在同一行上。但是，当我将图像放在内容标题 div 之前时，它们不再在同一行上。这就是我想要实现的 - 图像然后内容标题 - 在同一行。

采纳答案by Oriol

You can use floating:

您可以使用浮动：

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

If you want the following <p>to stay at the same line too, remove its

如果您希望以下内容<p>也保持在同一行，请将其删除

style="clear:both"

but then you should add

但是你应该添加

<div style="clear:both"></div>

after it.

之后。

回答by Sherbrow

Using Twitter Bootstrap classes may be the best choice :

使用 Twitter Bootstrap 类可能是最好的选择：

• pull-leftmakes an element floating left
• clearfixallows the element to contain floating elements (if not already set via another class)

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

回答by maxwilms

Starting with Bootstrap v3.3.0 you can use .media-leftand .media-body

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

Documentation: https://getbootstrap.com/docs/3.3/components/#media

文档：https: //getbootstrap.com/docs/3.3/components/#media

回答by Dilip Kumar

For Bootstrap 3.

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

回答by Dave

I would use Bootstrap's grid to achieve the desired result. The class="img-responsive" works nicely. Something like:

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

回答by Mile Mijatovi?

Use Nesting column

使用嵌套列

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

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