如何在没有负边距的情况下删除 Bootstrap 列装订线？

在不使用负边距的情况下消除 Bootstrap 中的列装订线

问题：

如何删除列之间默认的 30px 间距在 Bootstrap 中，无需设置负数

解决方案：

根据您的 Bootstrap 版本，推荐的方法如下：

Bootstrap 5：

• 新方法：利用 .g-0 类消除 .row 内的装订线。
• 行装订线：通过应用为特定断点设计的装订线类（例如 .gx -sm-4 适用于小型水平排水沟

Bootstrap 4：

• 简化：直接在 .row 上实现 .no-gutters 类.
• 代码示例:

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

Bootstrap 3.4.0 :

• 基于类的：使用新的引入了.row-no-gutters

Bootstrap 3 ,

• 填充调整：修改内边距列并向其中添加自定义 .no-gutter 类.row.
• CSS 代码:

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

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

以上是如何在没有负边距的情况下删除 Bootstrap 列装订线？的详细内容。更多信息请关注PHP中文网其他相关文章！