如何從特定 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>
</div>

以上是如何從特定 Div 中刪除 Bootstrap 裝訂線而不破壞反應能力？的詳細內容。更多資訊請關注PHP中文網其他相關文章！