删除列之间的间距

Question

我想删除 Bootstrap 网格中多列之间的空间。

我们如何覆盖 Bootstrap 的 CSS 以实现此任务或使用纯 CSS 的任何其他更好的解决方案？

main.html

 <div class="row">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

原文由 hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当你需要删除空格时添加一个类使用它

.padding-0{
    padding-right:0;
    padding-left:0;
}

在html中写这个类

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>

原文由 Morteza Negahi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 Bootstrap 5 中， no-gutters 类已更改为 g-0

在 Bootstrap 4 中，包含了 no-gutters 类。不需要额外的 CSS …

 <div class="row no-gutters">
  <div class="col-md-2">
    // stuff here for this column
  </div>
  <div class="col-md-10">
    // stuff here for columns
  </div>
</div>

原文由 Zim 发布，翻译遵循 CC BY-SA 4.0 许可协议