ブートストラップ行の g-5 を超える列間隔のネイティブ CSS スタイルをカスタマイズする方法
P粉644981029
2023-08-16 11:02:55
<p>ブートストラップを使用して簡単なランディング ページを構築しています。行の列間隔を広げる必要があります。カスタム Sass Spacing Mixin を使用して間隔を増やすことができることはわかっていますが、構築している Web サイトにはいくつかのセクションが含まれているため、シンプルに保ち、ビルド プロセスを必要としないようにしたいと考えています。行には g-5 クラス名を使用し、列間に 32 ピクセルまたは 40 ピクセルの間隔を確保しました。 CSSを使ってさらに増やす方法。 </p>
<pre class="brush:php;toolbar:false;"><div class="container mt-5 pt-5">
<div class="行 text-light g-5 fs-1">
<div class="col-lg-4">
<div class="bg-dark p-5">列</div>
</div>
<div class="col-lg-4">
<div class="bg-dark p-5">列</div>
</div>
<div class="col-lg-4">
<div class="bg-dark p-5">列</div>
</div>
</div>
</div></pre>
CSS を使用して行内の列間隔を広げるには、grid-column-gap プロパティを使用できます。このプロパティは、グリッド レイアウトの列間の間隔を指定します。