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 インストールと環境変数の設定手順 (詳細版)

推薦する

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

HTML のタイトル、段落、改行、水平線、特殊文字についての簡単な説明

タイトルXML/HTML コードコンテンツをクリップボードにコピー< h1 >第 1 レ...

CSS の 4 つのインポート方法と優先順位の簡単な分析

第一に: CSSを導入する4つの方法CSS を導入する方法には、インライン スタイル、埋め込みスタイ...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

Node.js コード実行をバイパスするためのヒントのまとめ

目次1. 子プロセス2. nodejsでのコマンド実行2.1 16進数エンコード2.2 ユニコードエ...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

JS addEventListener() およびattachEvent() メソッドは登録イベントを実装します

JavaScript の DOM イベント モデルでは、オブジェクトの addEventListen...

MySQLの行数カウントに関する簡単な説明

各テーブルの行数をカウントするために使用される MySQL count() 関数は、誰もがよく知って...

Linuxの相対パスと絶対パスの使用

01. 概要絶対パスと相対パスはシェル環境でよく使用され、それぞれに独自の用途があります。相対パスの...

携帯電話向けウェブページ作成のヒント

現在では多くの人がスマートフォンを使用していることを考慮すると、モバイル Web ページの書き方は、...

CSS ウェイト値(カスケード)の例の詳細な説明

•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? ...

Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...

docker で php+nginx+swoole+mysql+redis 環境を構築する方法

オペレーティングシステム: Alibaba Cloud ESC インスタンス centos7.4ソフ...