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

Posted 2023-03-05

【中文标题】将图像与同一行上的文本左侧对齐 - Twitter Bootstrap3

【英文标题】：Align image to left of text on same line - Twitter Bootstrap3

【发布时间】：2012-08-07 16:25:39

【问题描述】：

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

<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 之前时，它们不再位于同一行。这就是我想要实现的 - 图像然后是内容标题 - 在同一行。

【参考方案1】：

从 Bootstrap v3.3.0 开始，您可以使用 .media-left 和 .media-body

<div class="media">
    <span class="media-left">
        <img src="../site/img/success32.png" >
    </span>
    <div class="media-body">
        <h3 class="media-heading">Experience</h3>
        ...
    </div>
</div>

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

【参考方案2】：

使用嵌套列

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

【参考方案3】：

我会使用 Bootstrap 的网格来达到预期的效果。 class="img-responsive" 效果很好。比如：

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3"><img src="./pictures/placeholder.jpg" class="img-responsive"   ></div>
            <div class="col-md-9"><h1>Heading</h1><p>Your Information.</p></div>
        </div>
    </div>

【讨论】：

我也想知道为什么。我以前使用过这种方法，它对我有用。根据提出的问题，这似乎是一个合适的解决方案。

它为图像和文本添加了一堆填充。

@StefanD 有许多不同的方法可以修复填充/排水沟。以下是一些可能有帮助的答案：How to adjust gutter in Bootstrap 3 grid system 或 Bootstrap 3 Gutter Size

【参考方案4】：

对于引导程序 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>

【讨论】：

span4 未在 Bootstrap 3 中使用

【参考方案5】：

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

【讨论】：

其实Bootstrap for media中有一些特殊的类（比如图片）对齐了发帖人想要的：media、media_header和media_body

@RaulPinto 确实如此，但它并不是很宽松，而且它与 OP 的布局不匹配：jsbin.com/ipuyut/2/edit

如何让文字与图片居中？

@Imray 垂直对齐没有一种解决方案。搜索并选择最佳匹配（关键字垂直对齐文本图像）

【参考方案6】：

你可以使用浮动：

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

在它之后。