使用bootstrap的均匀间隔徽标

Question

使用bootstrap 3,如何创建单行均匀间隔的徽标？徽标是简单的JPG图像,我目前正在使用这样的代码:

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

.logotable {
   width: 100%
}

虽然这在PC上看起来很棒,但它不能转换为小型屏幕设备的堆叠形式.

无论我尝试什么都行不通(徽标总是以堆叠的形式出现)

• 出于某种原因,排液或者容器流体不工作(我父容器不能液,因为我还需要在容器内一些文本)
• 我尝试div.row-fluid在我的容器中放置一个并在其中添加每个图像,div.row但这不起作用
• 我不想为固定数量的列"硬编码"
• 经过多次困惑,我意识到我不需要容器流体,即.它不会均匀地分隔行,而只是扩展以填充可用空间

Answer 1

你需要一个col-[breakpoint]-[columns]和rowdiv一样,这可能就是你尝试它时它不起作用的原因.

除此之外,在Boostrap 3中,您需要使用img-responsive图像上的类来使它们具有响应性.

row-fluid 用于Bootstrap 2我相信并在Bootstrap 3中弃用.

我不确定你想要在一行上有多少个徽标,但你可以做以下的事情,在一行上有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;
}

非中心项目小提琴 | 中心项目小提琴

Flexbox指南

UPDATE

要垂直居中Flexbox项目,只需向容器添加高度:

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

.flex-item {
  margin: auto;
}

垂直中心小提琴