在同一行上对齐多个图像/标题 - 引导程序 3答案

【问题标题】：Align multiple images/headings on same line - bootstrap 3在同一行上对齐多个图像/标题 - 引导程序 3
【发布时间】：2014-04-17 16:55:44
【问题描述】：

我正在尝试将 3 个标题和 2 个图像对齐在同一行，如下所示：

标题图片标题图片标题

我尝试使用 Bootstrap 的媒体组件，如下所示：

<div class="media">

    <h5 class="media-heading">Media heading</h5>
    <img class="media-object pull-left" src="img/img.png" alt="..." />
    <h5 class="media-heading">Media heading</h5>
    <img class="media-object pull-left" src="img/img.png" alt="..." />
    <h5 class="media-heading">Media heading</h5>

</div>

但我很难让所有内容都在同一条线上。有任何想法吗？谢谢。

【问题讨论】：

您可能想选择一个最佳答案...？

标签： html css image twitter-bootstrap

【解决方案1】：

请试试这个方法

<div class="media">

    <h5 class="media-heading pull-left">Media heading</h5>
    <img class="media-object pull-left" src="img/img.png" alt="..." />
    <h5 class="media-heading pull-left">Media heading</h5>
    <img class="media-object pull-left" src="img/img.png" alt="..." />
    <h5 class="media-heading pull-left">Media heading</h5>

</div

【讨论】：

非常感谢大家！我就是这样用的。

【解决方案2】：

将.media h5 { display:inline } 添加到您的 CSS 中，您就完成了；）

小提琴：http://jsfiddle.net/mC82w/

编辑抱歉忘记这是在引导程序中，所以我在那里进行了测试，发现您还需要做的是添加 .media img { display:inline; } 并去掉里面的 pull left 类图片标签

【讨论】：

我刚刚尝试了一个语言环境行，我使用类 list-inline 在一行上标记了图像链接和文本链接。我用 img { display: inline; 包裹了一个 div } 围绕内联列表。效果很好！
很高兴我能帮上忙...嘿，为什么不给我的答案竖起大拇指（这个答案旁边的大数字上方的大三角形）...？ ;)

【解决方案3】：

只需使用 class="media-heading pull-left" 到三个标题

<div class="media">

       <h5 class="media-heading pull-left">Media heading</h5>
       <img class="media-object pull-left" src="img/img.png" alt="..." />
       <h5 class="media-heading pull-left">Media heading</h5>
       <img class="media-object pull-left" src="img/img.png" alt="..." />
       <h5 class="media-heading pull-left">Media heading</h5>

</div>

【讨论】：

【解决方案4】：

对于这类用例，我了解到 Bootstrap 的 thumbnails 非常方便，我们可以快速显示图像、视频、文本等的水平列表。

基本示例：

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

【讨论】：