Question

我试图在同一行上对齐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>

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

Answer 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

Answer 2

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

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

编辑抱歉忘了这是在bootstrap中，所以我在那里进行了测试，发现你还需要做的就是添加.media img { display:inline; }加上摆脱{{1图像标签内的类

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

Answer 4

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

基本示例：

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

将多个图像/标题对齐在同一行 - bootstrap 3

4 个答案: