[解決済み】列と列の間にスペースを追加する方法は?
2022-04-02 13:43:25
質問
2つのカラムがあります。
<div class="col-md-6"></div>
<div class="col-md-6"></div>
間にスペースを入れるにはどうしたらいいですか?
出力は、単純に2つの列が隣り合ってページの幅全体を占めることになります。例えば、幅を
1000px
とすると、それぞれのdivは
500px
を広くしています。
が欲しかったら
100px
の間にスペースがある場合、Bootstrap で自動的にこれを実現するにはどうしたらよいでしょうか。
div
のサイズは
450px
を、それぞれ間隔を空けて補正しています。
どのように解決するのですか?
を使ってカラム間の間隔を実現することができます。
col-md-offset-*
クラスは、ここに記載されています。
. 間隔が一定なので、すべての列が正しく並びます。間隔と列の大きさを均一にするために、私は次のようにします。
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
Bootstrap4では使用します。
offset-2
または
offset-md-2
関連
-
[解決済み] DIVを重ねる?
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] Bootstrap 3 で列からパディングを削除する
-
[解決済み] 子 div が親 div からはみ出さないようにする。
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み] DIVを等間隔に配置した場合の流体幅
-
[解決済み】divを横に並べて配置する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み】Google Chromeでレスポンシブメディアクエリが機能しない件
-
[解決済み] 2つのdivを隣り合わせに配置するには?
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] マージン/パディングが機能しない
-
[解決済み] このベベルボタンをCSSで実現するには?
-
[解決済み] MUIでカスタムアニメーションエフェクト@keyframesを適用する方法は?
-
[解決済み] twitter-bootstrapの@-ms-viewportというタグは何ですか?
-
[解決済み] ブルマのテーブルをレスポンシブにするにはどうしたらいいですか?
-
[解決済み] bootstrapのカラムの間に折り返さずにマージンを追加する方法【重複あり