使用Bootstrap时如何让4列网格在页面缩小时自适应变为1列布局？

你当前代码的问题出在列上额外添加了col类，该类会让所有尺寸的屏幕下，列都自动等分行宽度，导致小屏无法堆叠为1列。
你只需要删除每个列元素上的col类，仅保留col-md-3即可实现需求：

• 屏幕宽度≥768px（md断点）时，每列占3份栅格，4列平分宽度
• 屏幕宽度<768px时，列默认占满100%行宽，自动堆叠为1列布局

如果你需要调整堆叠的触发宽度，可以修改断点标识：比如用col-lg-3就会在屏幕宽度<992px时堆叠为1列，用col-sm-3就会在屏幕宽度<576px时堆叠为1列。

修改后的完整代码如下：

<div class="container-fluid ">
     <div class="row my-row ">
         <div class="col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
             column
         </div>
         <div class="col-md-3 my-col">
            <div style="height: 400px; background-color: rgb(26, 188, 156);"></div>
            
             <div><p>column</p></div>
         </div>
     </div>
 </div>

实现效果参考：

内容的提问来源于stack exchange，提问作者Andrea Demitri Seferi