如何在引导程序 3.1.1 中跨多个断点添加一致的网格间距宽度答案

【问题标题】：How to add consistent grid-gutter-width across multiple breakpoints in bootstrap 3.1.1如何在引导程序 3.1.1 中跨多个断点添加一致的网格间距宽度
【发布时间】：2014-03-14 05:44:09
【问题描述】：

我正在使用最新的引导程序，但我没有运气在响应式网格中的项目之间添加简单的边距。我有一个简单的网格，根据 col 设置（col-lg / col-md / col-sm / col-xs）从 4 / 3 / 2 / 1 列缩放

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <!-- put stuff in here -->
    </div>
  </div>
</div>

我想要一种简单的方法来覆盖默认样式（或直接使用 less 属性）以在具有上述布局的项目之间获得简单的边距。

默认情况下，这可以正确堆叠，但每个项目都直接相邻。如何以最少的 hacking 达到所需的装订线宽度？

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 gutter

【解决方案1】：

在 BS3 中，“排水沟”是使用填充而不是边距创建的，因此创建排水沟外观的最简单方法是使用 col-*.. 内的容器。

http://bootply.com/113815

请参阅这篇文章以了解 Bootstrap 3 排水沟：

http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/

【讨论】：

那么您是否使用了设置 grid-gutter-width 为 10/20/30px 的自定义构建？
它使用标准的 Bootstrap 构建（我认为）在 col 的每一侧使用 15px 的填充（30px gutter）