如何从特定 Div 中删除 Bootstrap 装订线而不破坏响应能力？

如何在不影响 Bootstrap 响应能力的情况下删除特定 Div 的装订线空间

在 Bootstrap 布局中，装订线会在列之间创建空白区域，宽度通常约为 20-30 像素。虽然这提供了视觉上吸引人的分隔，但在某些情况下，您可能希望在不影响布局响应能力的情况下删除特定 div 的装订线。

Bootstrap 3 解决方案

对于 Bootstrap 3，由于使用填充而不是边距来创建装订线，删除装订线变得更加简单。下面是 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;
}

要删除 Bootstrap 3 中特定 div 的装订线，只需将类“no-gutter”添加到相应的行即可：

<div class="row no-gutter">
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
</div>

Bootstrap 4和 5 个解决方案

Bootstrap 4 介绍了“no-gutters”类用于从整行中删除装订线：

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

Bootstrap 5 进一步扩展了装订线类，允许对水平和垂直进行细粒度控制间距。这些类包括：

• g-0 表示无间距
• g-(1-5) 调整间距
• gy-* 调整垂直间距
• gx-* 调整水平间距

例如，删除装订线特定的 div，同时保持响应能力：

#main_content .col {
  padding: 0 !important;
}

<div class="row g-0">
  <div class="col">

以上是如何从特定 Div 中删除 Bootstrap 装订线而不破坏响应能力？的详细内容。更多信息请关注PHP中文网其他相关文章！