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

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

Mary-Kate Olsen
リリース: 2024-12-13 07:29:11
オリジナル
482 人が閲覧しました

How to Eliminate Extra Padding in Bootstrap 3 Columns?

Bootstrap 3 でパディングを削除する方法

現在の問題には、col-md-* 列の左右のパディングを削除することが含まれます。ブートストラップ 3. 提供された HTML コードには 2 つのネストされた列が含まれていますが、結果には列の側面に追加のスペースが含まれます。

必要な出力

目標は、余分なスペースを排除し、列を互いに隣り合って配置することです。

解決策

問題は、.col-md-12 を親コンテナとして使用することで発生します。柱。 .col-md-12 は本質的に行ではなく列であるため、独自のマージンとパディングを継承します。これを修正するには、以下に示すように、列を .row クラス内でラップすることが不可欠です。

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

追加オプション

目的の結果が次の場合すべてのマージンとパディングを削除し、子列のこれらのスタイルを上書きするクラスを追加します:

.nopadding {
padding: 0 !important;
margin: 0 !important;
}
ログイン後にコピー

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

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