Bootstrap网格系统大屏下每行显示6个而非预期3个问题排查

• 核心错误是违反了Bootstrap栅格系统的结构规则：所有col-*类的元素必须嵌套在带有row类的容器内才能正常按比例分配宽度、自动换行。你当前直接将col-lg-4放在自定义的.bookshelf容器中，同时给.bookshelf设置了display: flex且没有配置flex-wrap: wrap，导致6个区块全部挤在同一行，宽度被强制压缩为容器的1/6，表现类似col-lg-2的效果。
• 第二个问题是你没有给区块设置固定的高宽比，所以即使宽度正确，区块也会是矩形而非你需要的正方形。
• 额外注意：你给每个区块设置了20px的边框，Bootstrap栅格默认用box-sizing: border-box计算宽高，边框会被包含在你设置的col-lg-4宽度内，不会额外撑宽，调整样式时可留意该属性的影响。

1. 调整HTML结构，在.bookshelf内部嵌套一层row容器包裹所有区块，同时将语义不合适的span标签改为div：

<div class="bookshelf">
  <div class="row w-100 m-0">
    <div id="section1" class="col-sm-6 col-lg-4"></div>
    <div id="section2" class="col-sm-6 col-lg-4"></div>
    <div id="section3" class="col-sm-6 col-lg-4"></div>
    <div id="section4" class="col-sm-6 col-lg-4"></div>
    <div id="section5" class="col-sm-6 col-lg-4"></div>
    <div id="section6" class="col-sm-6 col-lg-4"></div>
  </div>
</div>

2. 修改CSS样式：移除.bookshelf的display: flex，或者保留的话补充flex-wrap: wrap，同时给区块添加高宽比配置实现正方形：

.bookshelf {
    background-color: #564E52;
    width: 1100px;
    height: 700px;
    /* 移除display: flex; 或者补充flex-wrap: wrap; */
    margin: 100px auto 100px auto;
    border: 20px solid #7F5822;
}
/* 新增正方形样式 */
.col-sm-6.col-lg-4 {
    aspect-ratio: 1/1;
}
@media (max-width: 800px){
    .bookshelf{
        width: 900px;
        height: 500px;
    }
}
/* 原有区块的边框样式可正常保留 */

修复后大屏下会自动每行显示3个正方形区块，小屏（sm断点以下）每行显示2个，符合你的需求。

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