ブートストラップ列間にレスポンシブな間隔を追加するにはどうすればよいですか?

ブートストラップ列間にスペースを作成する方法

ブートストラップで列間にスペースを挿入するには、次の手順に従います。

質問:

どのように追加しますか? 2 つの列間のスペースを設定して、列の幅を自動的に調整して間隔を補正しますか?

答え:

行内および各列内で列を折り返します。親と同じ幅の別の列をネストします列:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">Your Content</div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">More Content</div>
  </div>
</div>

説明:

この手法は、ネストされた列の間に「ガター」を作成し、親列の全幅を継承します。 Bootstrap の組み込みのガターは、要素を自動的に均等に配置します。

例:

[ネストされた列のアプローチを使用して作成されたガターを備えた間隔をあけた列のイメージ]

以上がブートストラップ列間にレスポンシブな間隔を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。