如何删除或调整 Bootstrap 中特定 Div 的装订线空间？

删除特定 Div 的装订线空间

Bootstrap 的默认网格系统在列之间包含 30 像素的装订线空间，如果完全删除装订线，则会导致一行有 360 像素的未使用空间。要解决此问题，在保持 Bootstrap 响应能力的同时，请按照以下步骤操作：

Bootstrap 5（自 2021 年更新起）

Bootstrap 5 引入了特定的装订线类：

• g-0：否装订线
• g-(1-5)：使用间距单位调整水平和垂直装订线
• gy-*：调整垂直装订线
• gx-*：调整水平gutters

示例：

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

Bootstrap 4（不需要额外的 CSS）

Bootstrap 4 提供了 no-gutters 类行：

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

引导程序3（原始答案）

Bootstrap 3 引入了使用填充而不是间距的边距。要实现此效果：

1. 创建一个新的 CSS 类：

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

2. 从除第一列和最后一列之外的所有列中删除填充：

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

3. 将 no-gutter 类应用到所需的行：

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

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