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

刪除特定div 的裝訂線空間

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

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

Bootstrap 5

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

Bootstrap 4

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

  <div><li>
  <p>利用間距實用程式來控制各個列的邊距和填充：</p>
  <pre class="brush:php;toolbar:false"><div>
  <p><strong>Bootstrap 3</strong></p>
  <ul><li>
  <p>利用row.no-gutter 類，調整邊距和填充以刪除裝訂線：</p>
  <pre class="brush:php;toolbar:false">.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></div>