如何利用宽度填充列旁空白？Bootstrap新手求助

你遇到的问题是因为row-cols-*类的作用是指定每行显示的列数，而不是让列自动均分整个行的宽度。当实际列数少于你设置的row-cols-lg-4（大屏每行4列）时，剩下的空白不会被现有列填充，因为布局逻辑是“每行放4个，不够的话就留空”。

给你两个简单的解决办法：

方法1：让列自动均分剩余空间 #

去掉row-cols-*系列类，给每个col加上flex-grow-1类，这样列会自动拉伸填充整个行的空白，且尺寸保持一致：

<div class="container-fluid mt-3 position-absolute top-50">
    <div class="Header">
        <h1>Project Cat</h1>
    </div>
    <div class="row gap-3 bg-transparent-30 underline">
        <div class="col fs-1 flex-grow-1">Colum1</div>
        <div class="col fs-1 flex-grow-1">Colum2</div>
        <div class="col fs-1 flex-grow-1">Colum3</div>
    </div>
</div>

方法2：用响应式网格宽度精确控制 #

如果你想保留不同屏幕下的列数逻辑，直接给每个col设置对应断点的宽度类，比如：

<div class="container-fluid mt-3 position-absolute top-50">
    <div class="Header">
        <h1>Project Cat</h1>
    </div>
    <div class="row gap-3 bg-transparent-30 underline">
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 fs-1">Colum1</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 fs-1">Colum2</div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-4 fs-1">Colum3</div>
    </div>
</div>

这个写法里：

• 移动端（xs）：每行1列（col-12）
• 小屏（sm）：每行2列（col-sm-6）
• 中屏（md）和大屏（lg）：每行3列（col-md-4、col-lg-4），刚好占满12格网格，不会留空白。如果以后要加第四列，把大屏的类改成col-lg-3就行。

内容的提问来源于stack exchange，提问作者Ruby Calderon