Bootstrap布局疑问：设置col-5的div为何在小屏占满12列？

你的问题出在两个核心点：

1. 错误嵌套row：Bootstrap栅格系统的正确层级是container/fluid → row → col，直接在row里嵌套另一个row会触发它自带的负margin，彻底打乱外层列的宽度计算逻辑。
2. 列宽+外边距超出栅格上限：col-5的宽度加上m-3的左右外边距，总宽度超过了12列的栅格限制，小屏幕下自然会被挤成单列。

修正后的代码 #

<section id="tools" class="container-fluid">
    <div class="row mt-5 text-center">
        <h1 class="col-12">Tools </h1>
    </div>

    <!-- 第一组4个卡片，使用标准栅格结构 -->
    <div class="row g-4 justify-content-center align-items-center mt-4">
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
    </div>

    <!-- 第二组4个卡片 -->
    <div class="row g-4 justify-content-center align-items-center mt-4">
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
        <div class="col-6 col-lg-2 card d-flex justify-content-center align-items-center p-3">
            <img src="./images/html.png" class="img-fluid">
        </div>
    </div>
</section>

关键修改说明 #

• 移除嵌套的row：每个卡片组使用独立的row，严格遵循Bootstrap栅格层级规范。
• 替换col-5为col-6：小屏幕下12列均分两列，每列占6列，刚好填满且不会溢出。
• 用g-4替代m-3：g-*是Bootstrap专门为行内列设置间隙的类，避免手动加外边距导致的宽度溢出问题，同时保持卡片间距。
• 卡片外边距改内边距：把m-3换成p-3，如果需要卡片内部留白就用这个，避免外边距干扰列布局。

修改后，小屏幕下卡片会自动排成两列，大屏幕（lg及以上）保持4列布局，完全符合你的需求。

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