我知道这个问题已经问过很多次了,但是我的情况有点“具体”。我正在使用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/