ブートストラップ列の垂直方向の間隔の積み重ねの問題を解決する方法
この記事では、Bootstrap 列の垂直方向の間隔の積み重ねの問題の解決策を紹介します。必要な友人は参照してください。
発生した問題
Twitter Bootstrap を使用しているときに、ブートストラップの列が積み重なり始めたときに、垂直方向の間隔の問題が発生しました。たとえば、中サイズの画面の 3 列レイアウトを見てみましょう。 (推奨チュートリアル: Bootstrap チュートリアル )
<div class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </div>
このレイアウトをタブレットまたは携帯電話で表示すると、すべての列が積み重ねられますが、各列が前の列に直接接触する場合があります。
簡単な解決策は、各列に下マージンを追加することです。
[class*="col-"] { margin-bottom: 15px; }
これは場合によっては機能しますが、必要のない場合には余分な不要なマージンが追加されます。
解決策
この問題を解決するには、積み重ねたときに列の上マージンを適用する新しい CSS クラスを作成できます。
.row.row-grid [class*="col-"] + [class*="col-"] { margin-top: 15px;} @media (min-width: 1200px) { .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] { margin-top: 0; } } @media (min-width: 992px) { .row.row-grid [class*="col-md-"] + [class*="col-md-"] { margin-top: 0; } } @media (min-width: 768px) { .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] { margin-top: 0; } }
row-gridクラスは前の列と同じ列に上マージンを適用し、メディアクエリは不要な場合は上マージンを削除します。
関連して、行間に垂直方向のスペースを追加したい場合は、次の行を CSS に追加します。
.row-grid + .row-grid { margin-top: 15px; }
Usage
を追加するだけです。垂直方向の列間隔を有効にする行に row-grid クラスを追加します。
rreeee以上がブートストラップ列の垂直方向の間隔の積み重ねの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド:D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法:FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します(FormDataを使用してデータを収集し、サーバーに送信します)。カスタムスタイル(オプション)。

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加(オプション)調整スタイル(オプション)
