首頁 > web前端 > css教學 > 如何從特定 Div 中刪除 Bootstrap 裝訂線而不破壞反應能力?

如何從特定 Div 中刪除 Bootstrap 裝訂線而不破壞反應能力?

Patricia Arquette
發布: 2024-11-22 16:36:14
原創
618 人瀏覽過

How to Remove Bootstrap Gutters from Specific Divs Without Breaking Responsiveness?

如何在不影響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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板