如何删除 Bootstrap 网格系统中的装订线空间？

删除特定 Div 的装订线空间

简介

Bootstrap 网格系统在列之间采用 30px 的默认装订线，有助于整洁和一致的布局。然而，可能需要删除行内特定元素的装订线空间。本文探讨了在不影响 Bootstrap 响应能力或引入难看的空白空间的情况下实现此目标的技术。

Bootstrap 3.x

对于 Bootstrap 3.x，解决方案已变为更简单。现在使用填充物来创建排水沟，使其更容易移除。实现以下 CSS：

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

要删除特定 div 的装订线，只需将“无装订线”类分配给相应的行即可。

Bootstrap 4.x

Bootstrap 4.x 包含一个内置实用程序类“no-gutters”，它

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

Bootstrap 5.x

Bootstrap 的最新版本通过引入装订线类，对装订线间距提供了更精细的控制。使用“g-0”完全删除装订线或使用“g-1-5”类调整它们。这些类还可以通过断点进行响应式应用，例如“gx-sm-4”可以调整小于 768px 的屏幕的水平装订线。

以上是如何删除 Bootstrap 网格系统中的装订线空间？的详细内容。更多信息请关注PHP中文网其他相关文章！