在Bootstrap 4/Bootstrap 5中删除轴网柱的填充间距 [英] Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5

问题描述

如何在Bootstrap 4中创建无边距网格？

是否有用于移除檐槽的官方API或手动移除？

推荐答案

引导5： 附带gutter utilities

• 所有视口g-0..g-5
• 响应视口g-sm-0..g-lg-5
• 水平/垂直gy-0..gx-5

零边沟宽度示例：

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div> 

Bootstrap4： 随.no-gutters开箱即用。 来源：https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3：

需要自定义CSS。

样式表：

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

然后使用：

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

它将：

• 删除行边距
• 删除该行正下方所有列的填充

这篇关于在Bootstrap 4/Bootstrap 5中删除轴网柱的填充间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！