如何在Boostrap的网格列之间添加装订线？

Question

我已经看到这个问题安静了几个'重复'。最常见的两个答案是

1. 使用边距/填充规则创建css类
2. 为每个div添加一个额外的嵌套列（建议不要这样做，因为bootstrap建议列应该是“row”类的直接嵌套）。

这是我简单的HTML树结构：

      <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-4">
            <input type="text"/>
        </div>
        <div class="col-md-2">
            <input type="text"/>
        </div>
        <div class="col-md-4">
            <input type="text"/>
        </div>
       </div>

这导致以下布局：

问题 如何在引导网格系统的每列之间保持一致的间距/沟槽？

Answer 1

在bootstrap 4中，根据documentation，可以修改一个sass变量。他们没有在CSS中引用一种方法。该变量称为$ grid-gutter-width。这就是文档所说的：

  

列和装订线可以通过修改网格列的数量   Sass变量。 $ grid-columns用于生成宽度（in   $ grid-gutter-width允许的每个列的百分比）   特定于断点的宽度，在padding-left上均匀划分   并且填充柱子排水沟。

这就是代码的样子：

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

因此，这个装订线变量在列的左侧和右侧之间分割。我相信这个变量必须在你的引导程序安装在_variables.scss的位置进行修改。

Answer 2

每个Bootstrap网格列类在左侧和右侧都有默认的15px填充。如果你想覆盖它，你可以拥有自己的类并定义自己的填充，但一定要把它放在bootstrap.css之后。

要为容器输入全宽，请为每个基于文本的输入添加表单控件类。