如何在 Bootstrap 中刪除特定 Div 的裝訂線空間？

刪除特定div 的裝訂線空間

預設的Bootstrap 網格系統採用12 列佈局，並以30 像素的裝訂線分隔列。雖然 Bootstrap 提供了無裝訂線類別來從整行中刪除裝訂線，但這可能會導致行末尾出現額外的空間。

對於只需要刪除特定div 的裝訂線空間的情況，請考慮以下選項：

Bootstrap 5

• 利用新的gg -* 裝訂線類別根據特定斷點響應式調整裝訂線。
• g-0 消除所有裝訂線。
• g -(1-5) 使用間距單位調整水平和垂直裝訂線。
• gy-* 調整僅垂直裝訂線。
• gx-* 僅調整水平裝訂線。

Bootstrap 4

• 合併 no -gutters類別到行，這會刪除所有行的裝訂線列：

  <div>

  登入後複製

  登入後複製

  登入後複製

• 利用間距實用程式來控制各個列的邊距和填充：

  <div>

  登入後複製

  登入後複製

  登入後複製

Bootstrap 3

• 利用row.no-gutter 類，調整邊距和填充以刪除裝訂線：

  .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;
  }

  登入後複製

範例（引導程式3）：

<div>

以上是如何在 Bootstrap 中刪除特定 Div 的裝訂線空間？的詳細內容。更多資訊請關注PHP中文網其他相關文章！