我知道这个问题已经问过很多次了,但是我的情况有点“具体”。我正在使用TYPO3的模板,它具有一个bootstrap内容元素,在这里我可以告诉模板我需要多少列等。然后它呈现HTML代码。

Here's the website

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

最佳答案

对于需要均匀间隔且不与网格线对齐的元素,网格不是正确的选择。但是,您可以通过在包含项目的行上使用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或类似服务进行验证。

关于html - CSS-5个相等的Bootstrap列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42827971/

10-12 12:32
查看更多