使用引导程序均匀间隔的徽标

Question

使用 bootstrap 3，如何创建单行等间距的徽标？徽标是简单的 JPG 图片，我目前正在使用这样的代码：

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

.logotable {
   width: 100%
}

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

无论我尝试什么都没有用（徽标总是以堆叠形式出现）

• 由于某种原因，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 中已弃用。

我不确定您希望在一行中有多少个徽标，但您可以执行以下操作以在一行中显示 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

Answer 2

有什么要求？每行有多少个标志？这应该居中/合理吗？

如果不是，您可以使用类 col-xs-3 col-sm-2 col-md-1 编写/生成 div，例如包含每个图标，您将拥有您想要的。

通过这些课程，您将能够在移动设备上每行获得 4 个图标，在平板电脑上获得 6 个图标，否则为 12 个。

如果还不够，请告诉我

编辑：

所以每行 5 个图标，一个网格是每行 12 列，让我们将其居中并跳过第一列。所以我们得到：

<div class="row">
     <div class="col-sm-offset-1 col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
</div>
<div class="row clearfix">
    <div class="col-sm-offset-1 col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
     <div class="col-sm-2 col-xs-12"><img ... /></div>
</div>

一些技术（我不是很掌握）要点： col-sm-* 适用于平板电脑：因此此代码将从平板电脑到大型桌面每行显示 5 个图标。 col-xs-* ：对于移动设备，每行 1 个图标

clearfix：我不确定这一点，但当你没有以 12 列结束最后一个容器时它很有用，因此最好从第二个 div 使用它。你甚至可以从 1 div 开始，它不会像我所知的那样造成麻烦。

如果行的划分导致一些额外的空间，您可以使用一些样式属性或 CSS 类来删除它。