CSS - 5 个相等的 Bootstrap 列答案

【问题标题】：CSS - 5 equal Bootstrap columnsCSS - 5 个相等的 Bootstrap 列
【发布时间】：2017-03-16 07:40:50
【问题描述】：

我知道这个问题以前被问过很多次，但我的情况有点“具体”。我正在为 TYPO3 使用模板，它有一个引导内容元素，我可以在其中告诉模板我需要多少列等。然后它会呈现 HTML 代码。

如您所见，我有 2 行，每行包含 5 列，我希望它们使用剩下的所有空间并居中。我该怎么做？

【问题讨论】：

【解决方案1】：

对于需要均匀分布且未与网格线对齐的元素，网格不是正确的选择。但是，您可以通过在包含项目的行上使用 CSS 灵活框模型（又名 flexbox）轻松实现您的目标。

下面的 CSS 代码将容器设置为 flexbox，告诉它在所有可用空间中均匀地分隔其内容，并隐藏使用此方法时不需要的 ::after 伪元素。无需更改 HTML。在不支持 flexbox 的浏览器上（在 IE 11 下），一切看起来都和以前一样。

div#c1131 > .row {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

div#c1131 > .row::after {
  display: none;
}

如果浏览器兼容性存在问题，请确保您针对 caniuse 或类似服务进行验证。

【讨论】：

【解决方案2】：

据我所知，Bootstrap 中的默认网格有 12 个部分。所以，如果你想在一行中使用 5 列，那是不可能的。

您可以使用可分为 3、4 和 5 列 (60) 的网格列号，也可以针对这种特殊情况使用自己的 CSS。

【讨论】：

【解决方案3】：

只需将此 html 添加到同一父 div 中的给定列之前

<div class="col-lg-1"></div>

【讨论】：

【解决方案4】：

在这种情况下无需使用 css 进行任何更改： Bootstrap 有 12 列：因此您可以为每个框使用 2 个列，这意味着您使用了 10 个列，其中两个是免费的。您可以使用这两个列，一个在第一个框之前作为偏移量，在最后一个框之后您应该添加清除修复。

【讨论】：