html - CSS - 5 个相等的 Bootstrap 列

Question

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

Here's the website .

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

Answer 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 进行验证或类似服务。