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，例如包含每个图标的div，你将拥有你想要的东西。

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

如果还不够，请告诉我

编辑：

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

<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类来删除它。

使用bootstrap

2 个答案: