1. ホーム
  2. css

[解決済み】列と列の間にスペースを追加する方法は?

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