3 列网格中不需要的空白空间答案

【问题标题】：Unwanted empty space in 3 column grid3 列网格中不需要的空白空间
【发布时间】：2014-07-03 05:06:19
【问题描述】：

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

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

目前唯一可行的方法是在左侧块上设置负边距，我认为这并不理想。

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

【问题讨论】：

【解决方案1】：

如果您从less 源代码编译引导程序，只需将variables.less 中的@grid-gutter-width 变量更改为值0。以30px的默认值分发。

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

【讨论】：

【解决方案2】：

默认情况下，所有“col” div 的左侧和右侧都有 15 像素的填充。你会想要改变：

.col-lg-4 {
    padding-left: 15px;
    padding-right: 15px;
    }

到

.col-lg-4 {
    padding-left: 0;
    padding-right: 0;
    }

【讨论】：

我同意 @TimothyShields 的观点，即最好不要修改 CSS，您可以创建一个像 col-lg-4-no-padding 这样的新类，但不要更改您的核心 CSS 类
我也完全同意。我应该更清楚地说在您自己的样式文件中创建相同的类（在 bootstrap.css 之后运行），或者您当然可以像 Dan 建议的那样给它自己的类。但是，您需要确保在复制时复制 col-lg-4 的属性。覆盖您自己的样式文件中的代码通常更简洁、更容易。
@user3711852 即使您这样做了，所有其他 Bootstrap 样式现在都将与您的修改不一致。 @grid-gutter-width 用于各种边距、填充、间距、大小和定位计算。如果您只修改 .col-lg-4 类的这两个属性 - 即使在一个单独的文件中，这样更清晰 - 这些其他措施仍然会在视觉上不匹配。
我明白了。感谢您澄清@TimothyShields。这更加一致。