首頁 >web前端 >css教學 >如何從 Bootstrap 3 列中刪除不需要的填充和邊距?

如何從 Bootstrap 3 列中刪除不需要的填充和邊距?

Patricia Arquette
Patricia Arquette原創
2024-12-25 12:28:08415瀏覽

How to Remove Unwanted Padding and Margin from Bootstrap 3 Columns?

從Bootstrap 3 中的列中刪除填充

使用Bootstrap 3 的網格系統時,經常會遇到列周圍有額外的填充或邊距。以下是刪除它的方法:

在您的程式碼中:

<div class="col-md-12">
    <h2 class="h2">OntoExplorer.<span>

您已將兩列(col-md-4 和col-md-8)包裝在col- md- 中12 欄。預設情況下,col-md-12 佔據整行,包括邊距和填充,從而引入不必要的額外空間。

要解決此問題,請使用 .row 而不是 .col-md-12 作為父容器。這將確保兩列並排呈現,沒有任何不必要的填充或邊距:

<div class="container">
    <div class="row">
        <h2 class="h2">OntoExplorer.<span>

如果您仍然想從各個列中刪除填充或邊距,您可以添加自定義CSS像這樣的類別:

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

然後,將該類別應用於要從中刪除填充或邊距的欄位:

<div class="col-md-4 nopadding">

以上是如何從 Bootstrap 3 列中刪除不需要的填充和邊距?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn