如何在 Boostrap 的网格列之间添加排水沟？答案

【问题标题】：How can I add gutters between Boostrap's grid columns?如何在 Boostrap 的网格列之间添加排水沟？
【发布时间】：2017-10-21 06:22:37
【问题描述】：

我已经看到这个问题的一些“重复”。两个最常见的答案是

使用边距/填充规则创建 css 类
为每个 div 添加一个额外的嵌套列（不建议这样做，因为引导程序建议列应该是“行”类的直接嵌套）。

这是我的简单 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>

这会产生以下布局：

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

【问题讨论】：

看起来问题实际上不是网格，而是输入元素比它们的容器宽。使用开发人员工具检查应该很容易。

标签： html css twitter-bootstrap

【解决方案1】：

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

Columns and gutters 网格列的数量可以通过以下方式修改萨斯变量。 $grid-columns 用于生成宽度（在百分比），而 $grid-gutter-width 允许在 padding-left 上均匀划分的断点特定宽度和 padding-right 用于列间距。

这就是代码的样子：

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

所以这个装订线变量在列的左右填充之间分开。我相信这个变量必须在你的引导安装在_variables.scss 的位置进行修改。

【讨论】：

【解决方案2】：

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

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

【讨论】：