搜索

首页  >  问答  >  正文

如何自定义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>
P粉644981029P粉644981029467 天前487

全部回复(1)我来回复

  • P粉470645222

    P粉4706452222023-08-17 09:50:10

    要使用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>

    回复
    0
  • 取消回复