引导排水沟[重复]答案

【问题标题】：Bootstrap Gutters [duplicate]引导排水沟[重复]
【发布时间】：2019-08-27 07:26:36
【问题描述】：

我是引导程序和探索文档的新手，我一直在遇到 Gutters 术语，但无法正确理解术语的含义。如果能给出明确的答案就好了？

【问题讨论】：

【解决方案1】：

指的是：

.row 上的负 margins 和所有直接子列上的水平 padding

您可以使用.no-gutters 类来删除此默认样式。

.col-sm {
  background: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.35);
}

.no-gutters .col-sm {
  background: rgba(0,0,255,.15);
  border: 1px solid rgba(0,0,255,.35);
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
    </div>
  </div>
  <div class="container no-gutters">
    <div class="row no-gutters">
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

我相信引导程序（3 和 4）在列周围添加的默认填充只是一个花哨的术语（列两侧的 15px 填充）。

此外，link 可能有助于更好地理解它。

【讨论】：