BootStrap グリッド間に隙間を残す解決策

BootStrap グリッド システムでは、コンテナーを複数の均等な部分に分割できます。各部分の間に一定のスペースを残したい場合、最初に考えられる方法は、 marginを使用して各部分を分離し、隙間を作ることです。これは本当に可能なのでしょうか?

[例を見る]:

CSS スタイル:

.row div {
 
高さ: 100px;
 
}

HTMLコード:

<div class="コンテナ">
<!-- 行要素 -->
<div class="row">
<!-- 列要素 col-xs-value col-sm-value col-md-value col-lg-value -->
<div class="col-lg-5" style="background-color: wheat;"></div>
<div class="col-lg-4" style="background-color: pink;"></div>
<div class="col-lg-3" style="background-color: black;"></div>
</div>
</div>

【本来の効果は以下の通り】

ここで、これら 3 つの部分の間にギャップ (10 ピクセル) を作成したいのですが、元のレイアウトを変更することはできません。ここでは、マージン値を追加します。

CSS スタイルは次のように変更されます。

.row div {			
高さ: 100px;
右マージン:10px;
 
}

【マージン値追加後の効果】：

一部が圧迫されていることが観察されました。これは、この一連の操作によって元のグリッド レイアウトが変更されたことを意味します。

理由は次のとおりです。

グリッドを分割すると、各部分がいっぱいになり、押し込まれます。各列の間に空白スペースを作成するには、列にmargin値を追加します (グリッド自体の各部分のサイズは変更されません)。すると、各部分が移動し、親コンテナーの幅 (12 部分) を確実に超過します。

上記の操作と説明から、 margin値を設定してもグリッドシステムに隙間を残す効果は得られないことがわかりましたが、この問題はどのように解決すればよいのでしょうか。

【解決】：

それぞれの小さな列にpadding-right値を設定し、小さな列にボックスを配置して、その幅を 100% (親と同じ) に設定できます。

CSS スタイル:

.row div {
padding-left: 0px; // デフォルトの左パディングを削除します
右パディング: 10px;
高さ: 100px;
}
 
.ヘジ{
幅: 100%;
背景色: 緑;
}  

HTMLコード:

<div class="コンテナ">
<!-- 行要素 -->
<div class="row">
<!-- パート 1 -->
<div class="col-md-5" style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- パート 2 -->
<div class="col-md-4" style="background-color: ;">
<div class="hezi"></div>
</div>
<!-- パート 3 -->
<div class="col-md-3" style="background-color: ;">
<div class="hezi"></div>
</div>
 
</div>
</div>

注: BootStrap のグリッド システムは、レスポンシブ Web 開発に非常に便利です。グリッド システムを使用すると、行と列を使用して簡単にレイアウトを制御できます。ただし、 col-に默認會帶15像素的左右padding 、非常に問題が発生する可能性があります。解決策は、内部タグのクラスにrowを追加し、左と右のパディングを 0 に設定することです。これにより、テーブルのデフォルトのパディングが削除されます。

最終的な効果と分析は次のとおりです。

要約する

BootStrap グリッド間に隙間を残す解決策に関するこの記事はこれで終わりです。BootStrap グリッド間に隙間を残す方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。