【问题标题】: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 选择器 &gt; 意味着 .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,它的工作原理与宣传的完全一样。

      要从行及其列中删除装订线,只需将此类添加到 &lt;div&gt;

      【讨论】:

        【解决方案5】:

        更改按钮链接样式。

        <... class="bth btn-link noMarginPaddingBorder" ...>
        
        .noMarginPaddingBorder{
            margin:0 !important; 
            padding:0 !important;
            border: 0 !important;
        }
        

        【讨论】: