3 列网格中不需要的空白空间 [英] Unwanted empty space in 3 column grid

问题描述

我有这个网格，它必须占据容器的整个宽度，但它不断在左侧和右侧添加不需要的空间.我在这些区域周围添加了一个边框:http://i.imgur.com/0FP64kK.png

I have this grid which has to take up the full width of the container, but it keeps adding unwanted space on the left and right sides. I added a border around the areas: http://i.imgur.com/0FP64kK.png

有一个容器包装 div 和 3 个带有 col-lg-4 的 div.

There is a container wrapper div and 3 divs with col-lg-4.

到目前为止唯一有效的是在左侧块上设置负边距，我认为这并不理想.

The only thing that works so far is to set a negative margin on the left block, which is not ideal I assume.

如何确保整个宽度被消耗?

How to make sure the full width is consumed?

推荐答案

如果您正在从 less 源编译 Bootstrap，只需更改 @grid-gutter-width 变量在 variables.less 到值 0.它以30px的默认值分发.

If you are compiling Bootstrap from less source, simple change the @grid-gutter-width variable in variables.less to the value 0. It is distributed with the default value of 30px.

不要只修改css文件.less 源中有 15 个地方引用了 @grid-gutter-width，然后在更多地方引用了这些地方 - 换句话说，变量有深远的影响.仅仅修改编译后的css文件，不可避免地会使整体样式处于不良状态.

Do not just modify the css files. There are 15 places in the less source where @grid-gutter-width is referenced, and those are then referenced in very many more places - in other words, the variable has far-reaching effects. Just modifying the compiled css files will inevitably leave the overall styling in a bad state.

这篇关于3 列网格中不需要的空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！