基于Bootstrap实现响应式盒子布局的问题求助（含断点与间距需求）

要搞定你需要的布局，核心解决两个点：盒子宽度始终≥350px，以及盒子间的水平/垂直间距。之前用固定col断点的方式不合适，换成下面的方法就能解决：

关键调整 #

• 用Bootstrap自带的g-*类给row设置间距，替代自定义margin，避免破坏网格布局
• 给box-container加min-width: 350px强制最小宽度，配合flex:1让盒子在空间足够时自动拉伸
• 去掉固定的col-sm-4，改用col让布局自适应

修改后的完整代码 #

HTML #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap-grid.css" integrity="sha512-Fxj/xUyzF1sPpG8bmkIT/Rh4tAHwPn3roK9DwsoBoglSt2tfNpYWF+vWiwVw0SVhXVEjxmdDwkCzD/wtFOIAUg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="section-container container py-3">
  <div class="row g-4"> <!-- g-4控制间距，可按需改成g-3/g-5 -->
    <div class="box-container col px-3 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <div class="box-container col px-3 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
    </div>
    
    <div class="box-container col px-3 py-4">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <div class="box-container col px-3 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    
    <div class="box-container col px-3 py-4">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
</div>

CSS #

.section-container {
  border: 1px solid black;
}

.box-container {
  border-radius: 20px 0 20px 0;
  background-color: lightgray;
  border: 1px solid black;
  min-width: 350px; /* 确保盒子不会窄于350px */
  flex: 1; /* 空间足够时自动填满宽度 */
}

为啥这么改 #

1. 间距问题：Bootstrap的g-*类是专门用来设置网格间距的，比自己加margin靠谱，不会出现左右溢出或者排版错位的情况
2. 最小宽度：min-width:350px直接强制盒子宽度下限，窗口缩小到不够放多个盒子时，自动换行
3. 自适应布局：col配合flex:1，让每个盒子在当前行里自动分配宽度，既保证最小宽度，又能在大屏幕上均匀分布

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