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

Bootstrap 3 の列から不要なパディングとマージンを削除するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-12-25 12:28:08
オリジナル
372 人が閲覧しました

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>
ログイン後にコピー

2 つの列 (col-md-4 とcol-md-8) をcol-md- 内でラップしました。 12列。デフォルトでは、col-md-12 はマージンとパディングを含む行全体を占めるため、不要な余分なスペースが生じます。

これを修正するには、.col-md-12 の代わりに .row を使用します。親コンテナ。これにより、2 つの列が不必要なパディングやマージンなしで並べてレンダリングされます。

<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 中国語 Web サイトの他の関連記事を参照してください。

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