ブートストラップで列間にスペースを追加するにはどうすればよいですか?

Bootstrap で列間にスペースを追加する

Bootstrap のグリッド システムを使用する場合、列間にスペースを追加する必要がある場合があります。デフォルトでは、列は互いに隣接して配置されます。ただし、単純なブートストラップ ソリューションを使用すると、列間の間隔を簡単に実現できます。

ネストされた列

列間の間隔を作成するには、ネストされた列内で各列をラップできます。 。たとえば、次のコードを考えてみましょう。

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Column 1 content
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Column 2 content
    </div>
  </div>
</div>

内部列のサイズ変更

この方法で列をラップすることにより、Bootstrap は自動的に約 10 ピクセルのパディングを内部列に割り当てます。内側の列の左右。これにより、外側の列の間にスペースが表示されます。

スペースのカスタマイズ

列間のスペースの量を調整するには、内側の列の幅を指定できます。列。たとえば、100 ピクセルのスペースが必要な場合は、内側の列を次のように変更します。

<div class="col-md-12">

結論

ネストされた列テクニックを使用すると、次のように簡単に追加できます。ブートストラップの列間の間隔。これは、特定の要素を強調したい場合や、より視覚的に魅力的なレイアウトを作成したい場合に特に便利です。

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