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

ブートストラップの列間にスペースを導入する方法

ブートストラップでは、列を定義することで位置合わせとコンテンツの分散が容易になります。ただし、デフォルトの列配置では列が直接並列され、使用可能なスペース全体が消費されます。列間に適切なスペースを導入すると、読みやすさと視覚的な魅力が向上します。

列間にスペースを導入するには、各col-md-6列内に追加のcol-md-12列をネストできます。これにより、外側の列の間にギャップを効果的に追加するコンテナが作成されます。

コード例:

<div class="row">
  <div class="col-md-6">
    <div class="col-md-12">
      Some Content...
    </div>
  </div>
  <div class="col-md-6">
    <div class="col-md-12">
      Some Second Content...
    </div>
  </div>
</div>

このコード構造により、外側の列と列の両方が確実に配置されます。列にはネストされたcol-md-12列があり、列の間にスペースが入ります。 Col-md-12 列は、外側の列内の元の幅の分割を維持しながら、効果的にギャップを作成します。

出力:

[間隔をあけた出力のイメージ] 2 つの列の間]

このメソッドを実装すると、元の列を損なうことなく、列間に自動的にスペースを追加できます。サイズ。

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