求助：Bootstrap容器列无法保持4等份，最后一列折行

问题原因 #

你遇到的换行问题，核心是Bootstrap网格布局的宽度计算逻辑被额外边距破坏：

• Bootstrap的col-md-3默认占父容器25%宽度，4个加起来刚好100%。
• 但你给每个col加了m-2（Bootstrap的margin类），同时自定义CSS里又加了margin-right:10px，这些额外的边距会让每个列的总占用宽度超过25%，4个列的总宽度就会超过row的100%宽度，触发最后一列换行。

解决方案 #

使用Bootstrap官方推荐的**容器间隙（gap）**方案替代直接给列加margin，同时清理重复的边距设置：

修改后的HTML代码 #

<section id="technical_stack">
    <h1 class="section_header">Technical Skills</h1>
    <div class="container">
        <!-- 用g-3给row设置列之间的间隙，数值可根据需求调整 -->
        <div class="row g-3">
            <div class="col-sm-6 col-md-3 p-2 skills_tiles">
                Programming Languages<br>
                <span class="skills">                        
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                </span>
            </div>
            <div class="col-sm-6 col-md-3 p-2 skills_tiles">
                Webdev & Frameworks<br>
                <span class="skills">                        
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                </span>
            </div>
            <div class="col-sm-6 col-md-3 p-2 skills_tiles">
                Databases & Other<br>
                <span class="skills">                        
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                </span>
            </div>
            <div class="col-sm-6 col-md-3 p-2 skills_tiles">
                In development<br>
                <span class="skills">                        
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                    <i class="fa-solid fa-film"></i>
                </span>
            </div>
        </div>
    </div>
</section>

修改后的CSS代码 #

.skills_tiles {
    /* 移除多余的margin-right，改用row的g-*控制间隙 */
    margin-bottom: 0; 
    display: grid;
    background-color: white;
    color: #212529;
    border-radius: 5px;
    padding: 42px 22px;
    cursor: crosshair;
    position: relative;
    top: 0;
    transition: ease-in-out 0.4s;
}

.skills_tiles:hover {
    background: #212529;
    color: white;
}

关键说明 #

1. *row的g-类：这是Bootstrap 5+提供的间隙控制类，g-3表示列之间的间隙为0.75rem（默认值），可以根据需求改成g-2、g-4等，它不会影响列的宽度计算，完美适配网格布局。
2. 清理重复边距：移除col上的m-2和CSS里的margin-right，避免额外宽度占用，确保4个col-md-3的总宽度刚好是100%。
3. 响应式保持：保留col-sm-6，确保在小屏幕上自动变成2列布局，不影响移动端体验。

内容的提问来源于stack exchange，提问作者02MESH