ホームページ > ウェブフロントエンド > CSSチュートリアル > Bootstrap 3 の列からパディングを削除するにはどうすればよいですか?

Bootstrap 3 の列からパディングを削除するにはどうすればよいですか?

DDD
リリース: 2024-12-09 15:50:18
オリジナル
366 人が閲覧しました

How to Remove Padding from Bootstrap 3 Columns?

ブートストラップ 3 の列要素からパディングを削除する

問題:

ブートストラップ 3 でパディングを削除したいとします。または、col-md-* 要素の周囲にマージンを付けて、どちらの要素にも余分なスペースを与えずにシームレスに収まるようにします。 Side.

HTML コード:

<div class="col-md-12">
    <h2>OntoExplorer.<span>
ログイン後にコピー

解決策 1: 行を使用して列を折り返す

通常、次のようにする必要があります。複数の列を単一の .col-md-12 内にネストするのではなく、.row を使用して囲みます。 .row を使用すると、ネストされた列によって導入される不要なマージンとパディングを回避できます。

<div class="container">
    <div class="row">
        <h2>OntoExplorer.<span>
ログイン後にコピー

解決策 2: カスタム スタイルを追加する

最初の解決策が必要な場合これでは十分ではありません。パディングとマージンを削除するカスタム クラスを作成できます。明示的に。

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}
ログイン後にコピー
<div class="container">
    <div class="row">
        <div class="col-md-4 nopadding">
            ...
        </div>

        <div class="col-md-8 nopadding">
            ...
        </div>
    </div>
</div>
ログイン後にコピー

以上がBootstrap 3 の列からパディングを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート