如何删除 Bootstrap 中列之间的装订线（间距）？答案

【问题标题】：How to remove the gutter (spacing) between columns in Bootstrap?如何删除 Bootstrap 中列之间的装订线（间距）？
【发布时间】：2014-02-10 20:32:22
【问题描述】：

如何删除列之间的 30 像素间距？但是没有设置margin-left:-30px？

<div class='container'>
  <div class='row'>

    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>
    <div class='col-lg-1'></div>

  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

2021 年更新

Bootstrap 5 .no-gutters 类已替换为 .g-0。在您希望列之间没有间距的.row 上使用它。

Bootstrap 5 还具有 new gutter classes，专门用于调整整行的装订线。可以为每个断点响应式地使用排水沟类（即：gx-sm-4）

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

Bootstrap 4 现在包含一个 .no-gutters 类，您只需将其添加到 .row。

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

引导程序 4：http://codeply.com/go/OBW3RK1ErD

Bootstrap 3.4.0+ 排水沟是使用填充创建的，但它们添加了 .row-no-gutters 类。请参阅documentation for Bootstrap 3.4 并查找“删除排水沟”。

您可以使用的 HTML：

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

Bootstrap 3+, 排水沟是使用填充创建的。您还必须调整负边距，以免影响外列周围的间距。

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

只需将no-gutter 类添加到.row。

演示：http://bootply.com/107458

【讨论】：

它很好但它不起作用，可能是订单样式表不正确。我在样式表之前有 boostrap.css ，我将您的解决方案放在其中。对吗？
是的，应该可以。您是否还在 HTML 标记中添加了特殊的 col 类？
您了解解决方案吗？ CSS 使用“.col”，因此您可以将其应用于您希望删除装订线的任何列。这样您就可以将它用于col-lg-1 以外的其他列
是的，我非常了解，找到了.. 干得好，谢谢。您知道一些用于开发主题引导程序的现代最佳实践来源吗？谢谢你的回答。
但这适用于所有分辨率，对吧？你不能只拥有没有排水沟的移动版本吗？ ://

【解决方案2】：

删除列上的填充的更好方法是将.no-pad 类添加到您的.row：

 <div class="row no-pad">

...然后添加这个 CSS。

.row.no-pad {
  margin-right:0;
  margin-left:0;
}
.row.no-pad > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

寻找first- 和last-child 项目是个坏主意，因为实际上.row 旨在处理视口左右的偏移量。使用上述方法，所有.col-*s 的样式都保持相同，这在考虑响应性时也更简单，尤其是在移动尺寸下堆叠（试试我下面md 尺寸的演示）。

直接后代 CSS 选择器 > 意味着 .no-pad 将仅应用于该 .row 的直接子 .cols，因此您可以在随后的嵌套列结构上进行填充（或不）如果你愿意。

同样使用属性选择器[class*='col-'] 意味着每一列都不需要添加额外的非引导类。

这是一个演示：http://www.bootply.com/Ae3xTyAW5D

【讨论】：

【解决方案3】：

我建议不要应用难以维护的修复程序，而是从 Customizer 生成您自己的自定义 Bootstrap 版本，您可以在其中将装订线设置为您想要的大小（或通过将其设置为 0 将其完全删除）。

【讨论】：

这不是最好的主意。如果有些区域你想要排水沟，而其他区域你不想要呢？
您可以使用 bootstrap mixins 生成另一组带有或不带有列的列，或者手动创建自己的简单列

【解决方案4】：

Bootstrap 3 在 v3.4.0 中引入了 .row-no-gutters class，它的工作原理与宣传的完全一样。

要从行及其列中删除装订线，只需将此类添加到 <div>。

【讨论】：

【解决方案5】：

更改按钮链接样式。

<... class="bth btn-link noMarginPaddingBorder" ...>

.noMarginPaddingBorder{
    margin:0 !important; 
    padding:0 !important;
    border: 0 !important;
}

【讨论】：