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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Bootstrap グリッド システムのサンプル コード共有
  • ブートストラップの共通コンポーネントとグリッドレイアウトの詳細な説明
  • Bootstrapのグリッドシステムの使い方とページ調整や変形の解決方法
  • Bootstrap グリッド システムのシンプルな実装コード
  • BootStrap グリッド システム、フォーム スタイル、ボタン スタイルのソース コード分析
  • BootStrapグリッドバーシステムに基づいて、ウェブサイトの下部にある著作権情報エリアを入力します。
  • Bootstrap の学習と使用 (ナビゲーション バー、ドロップダウン メニュー、カルーセル、グリッド レイアウトなど)
  • Bootstrap グリッド システム学習ノート

<<:  mysql MGR シングルマスターとマルチマスターモードの切り替えの知識ポイントの詳細な説明

>>:  WIN10 での JDK インストールと環境変数の設定手順 (詳細版)

推薦する

JSONObject の使用方法の詳細な説明

JSONObject は単なるデータ構造であり、JSON 形式のデータ構造 ( key-value構...

docker デプロイメントの実装手順 lnmp-wordpress

目次1. 実験環境2. Dockerソースをインストールする3. Dockerをインストールする4....

Eclipseを使用してMySQLデータベースに接続する方法を説明します

序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...

js におけるイベントバブリングとイベントキャプチャの簡単な分析

目次01-イベントバブリング1.1- イベントバブリングの概要1.2-イベントバブリングの利用(イベ...

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...

React プロジェクトで eslint の Baidu スタイルを使用する詳細な説明

1. Baidu Eslint Ruleプラグインをインストールする npm i -D eslint...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

JavaScriptはイベントリスナーをイベント委任にバッチで追加します。詳細なプロセス

1. イベント委任とは何ですか?イベント委譲: イベントバブリングの特性を利用して、子要素に登録すべ...

適応型ウェブページを設計および作成する方法

3G の普及により、携帯電話を使ってインターネットにアクセスする人が増えています。モバイル デバイス...

Linux SSHポートを転送する3つの方法

ssh は私が最も頻繁に使用する 2 つのコマンドライン ツールのうちの 1 つです (もう 1 つ...

スライダー効果を実装するミニプログラム

この記事の例では、スライディングブロック効果を実現するための小さなプログラムの具体的なコードを参考ま...

docker を使用してシンプルな C/C++ プログラムをデプロイする方法

1. まずhello-world.cppファイルを作成しますプログラムコードは次のとおりです。 #i...

CSSをインポートする方法に関する詳細な洞察の要約

CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...

docker の実行に必要な権限の分析

Docker を実行するには root 権限が必要です。非 root ユーザーに docker コマ...