如何自定义Bootstrap行中超过g-5的列间距的原生CSS样式
P粉644981029
P粉644981029 2023-08-16 11:02:55
[HTML讨论组]
<p>使用bootstrap正在构建一个简单的落地页。我需要增加行中的列间距。我知道我们可以通过自定义sass间距mixin来增加间距,但由于我正在构建的网站包含几个部分,我希望保持简单,不需要构建过程。我在行上使用了g-5类名,它在列之间提供了32px或40px的间距。如何使用CSS进一步增加它。</p> <pre class="brush:php;toolbar:false;">&lt;div class="container mt-5 pt-5"&gt; &lt;div class="row text-light g-5 fs-1"&gt; &lt;div class="col-lg-4"&gt; &lt;div class="bg-dark p-5"&gt;列&lt;/div&gt; &lt;/div&gt; &lt;div class="col-lg-4"&gt; &lt;div class="bg-dark p-5"&gt;列&lt;/div&gt; &lt;/div&gt; &lt;div class="col-lg-4"&gt; &lt;div class="bg-dark p-5"&gt;列&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre>
P粉644981029
P粉644981029

全部回复(1)
P粉470645222

要使用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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号