html - 使用 Bootstrap 均匀间隔的 Logo

Question

使用 bootstrap 3，如何创建一行均匀间隔的 Logo ？ Logo 是简单的 JPG 图像，我目前使用的代码如下:

<table class="logotable text-center">
     <tr>
        <td>
          <img ..>
        </td>
     </tr>
</table>

.logotable {
   width: 100%
}

尽管这在 PC 上看起来不错，但它不会转换为适用于较小屏幕设备的堆叠形式。

无论我尝试什么都不起作用( Logo 总是以堆叠形式出现)

• 出于某种原因row-fluid或 container-fluid不起作用(我的父容器不能流动，因为我还需要容器内的一些文本)
• 我尝试在我的容器中放置一个 div.row-fluid 并将每个图像添加到一个 div.row 中，但这没有用
• 我不想"hard code"对于固定数量的列
• 在 lots of confusion 之后我意识到我不需要容器流体，即。它不会均匀地隔开行，而只是扩展以填充可用空间

Answer 1

您需要 col-[breakpoint]-[columns] 以及 row div，这可能就是您尝试时它不起作用的原因。

除此之外，在 Boostrap 3 中，您需要在图像上使用 img-responsive 类来使它们响应。

row-fluid 在 Bootstrap 2 中使用，我相信在 Bootstrap 3 中被弃用。

我不确定一行中需要多少个 Logo ，但您可以执行类似以下操作以在一行中包含 3 个图像:

<div class="row">
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
  <div class="col-md-4">
    <img class="img-responsive" alt="" src="/path/to/image" />
  </div>
</div>

编辑

为了避免硬编码，你可以像这样使用 flexbox:

HTML

<div class="flex-container">
  <div class="flex-item">
    <img src="" alt="1" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="2" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="3" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="4" class="img-responsive" />
  </div>
  <div class="flex-item">
    <img src="" alt="5"class="img-responsive" />
  </div>
</div>

CSS

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 10px;
}

/* to center flex-items */
.flex-item {
   margin: auto;
}

Non-Centered Items Fiddle | Centered Items Fiddle

Flexbox Guide

更新

要使 flexbox 元素垂直居中，只需向容器添加一个高度:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: 200px;
  background: red;
}

.flex-item {
  margin: auto;
}

Vertically Centred Fiddle