如何自定义Bootstrap行中超过g-5的列间距的原生CSS样式
<p>使用bootstrap正在构建一个简单的落地页。我需要增加行中的列间距。我知道我们可以通过自定义sass间距mixin来增加间距,但由于我正在构建的网站包含几个部分,我希望保持简单,不需要构建过程。我在行上使用了g-5类名,它在列之间提供了32px或40px的间距。如何使用CSS进一步增加它。</p>
<pre class="brush:php;toolbar:false;"><div class="container mt-5 pt-5">
<div class="row 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属性。该属性指定了网格布局中列之间的间距。
.container { mt-5; pt-5; } .row { text-light; g-5; fs-1; grid-column-gap: 50px; }<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container mt-5 pt-5"> <div class="row text-light g-5 fs-1"> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> <div class="col-lg-4"> <div class="bg-dark p-5">column</div> </div> </div> </div>