css - 仅删除特定 div 的装订线空间

Question

默认的 Bootstrap 网格系统使用 12 列，每个跨度具有 30px 间距，如下所示。 装订线是列之间的空白。装订线宽度似乎在 20px - 30px 之间。我们假设这里是 30px。

我想删除特定 div 的装订线空间，这样行中就没有装订线空间了。每个跨度将彼此相邻，没有间距。

问题是，如果我删除边距 30px(装订线)，它会在行尾留下 360px (12 * 30px) .

鉴于我只想删除特定 div 的装订线空间。假设它用于 main_content div 中的 div。

div#main_content div{
  /*
 no gutter for the divs in main_content
 */
}

如何在不失去 Bootstrap 响应能力且不在行尾留出空间的情况下移除特定 div 的装订线？

Answer 1

Bootstrap 5(2021 年更新)

Bootstrap 5 有新的 gutter classes专门设计用于调整整行的装订线。可以对每个断点响应地使用 gutters 类(即:gx-sm-4)

• 使用g-0对于无排水沟
• 使用g-(1-5)通过间距单位调整水平和垂直间距
• 使用gy-*调整垂直间距
• 使用gx-*调整水平间距

Bootstrap 4(不需要额外的 CSS)

Bootstrap 4 包含一个 no-gutters可应用于整个 row 的类:

http://codeply.com/go/pVsGQZVVtG

<div class="row no-gutters">
    <div class="col">..</div>
    <div class="col">..</div>
    <div class="col">..</div>
</div>

还有新的spacing utils可以控制填充/边距。因此，这可用于更改单个列(即:<div class="col-3 pl-0"></div>)集的填充(装订线)padding-left:0;在列上，或使用 px-0删除左右填充(x 轴)。

Bootstrap 3(原始答案)

对于 Bootstrap 3，这要容易得多。 Bootstrap 3 现在使用填充而不是边距来创建“装订线”。

.row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

然后只需添加 no-gutter到要删除间距的任何行:

  <div class="row no-gutter">
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
    <div class="col-lg-1"><div>1</div></div>
  </div>

演示:http://bootply.com/107708