Twitter Bootstrap - 连续样式超过 12 列？答案

【问题标题】：Twitter Bootstrap - Style more than 12 columns in a row?Twitter Bootstrap - 连续样式超过 12 列？
【发布时间】：2016-02-10 11:36:58
【问题描述】：

我有以下代码，可能会或可能不会连续提供超过 12 列。如果超过 12 列，我怎样才能让它看起来不错？

<div collapse="gpCollapse">
  <div ng-repeat="item in revealedCtrl.greatPersons" class="thumbnail col-md-3">
    <img ng-src="/images/useritems/{{item.greatperson.image}}" tooltip="{{item.greatperson.name}}"/>

    <div class="caption">
      <h3 class="text-center">{{item.greatperson.name}}</h3>

      <p class="text-justify">
        {{item.greatperson.description}}
      </p>
    </div>
  </div>
</div>

【问题讨论】：

“看起来不错”是一个笼统的术语。你能说得更具体点吗？
抱歉，我认为这是不言自明的。我希望图像显示在左侧浮动。在上面的图像中，您看到两个图像向右浮动，最后最后一个是连续的。对我来说，它看起来应该有 2 行的空间。一个有 4 个项目，另一个有 3 个
这看起来像是 flexbox 会派上用场的地方。引导网格功能非常有限。
@J4G 一个 CSS 特性，bootstrap 实际上在 version 4 中利用 :)
这里解释了解决此问题的多种方法：stackoverflow.com/questions/22310912/…

标签： css angularjs html twitter-bootstrap

【解决方案1】：

为“缩略图”类定义一个恒定的高度。

【讨论】：

这个高度应该是多少？
谢谢。这是最简单的。我将其设置为 320 像素。

【解决方案2】：

你的布局最终看起来不好看的原因是列内容的高度可变，特别是在

<div class="caption">

使用css给列div（.thumbnail）

position: relative;
// to make space for absolutely positioned caption
padding-bottom: 40px;

和.caption

position: absolute;
bottom: 0px;

【讨论】：

这几乎奏效了。但是，文本突然出现在图像内部。看下面：bildr.no/view/R2g1YzNq
使用 .thumbnail 的像素填充量，底部使用相同数量的像素作为 .caption 高度。这可能会导致文本溢出容器，但您可以使用 overflow:hidden 或 text-overflow: ellipsis 等让其看起来更好。