如何在Bootstrap5中实现lg、md、sm模式下的响应式盒子布局？

需求实现说明 #

你要的「sm断点下占满整行（col-12），md断点下占半行（col-6）」的效果，现有代码其实已经实现了，不过可以优化写法：

• Bootstrap栅格类是向上兼容的：设置col-md-6后，md及更大的断点（比如lg）会默认沿用这个样式，除非你单独指定更大断点的类（比如col-lg-3）。
• 对于sm及更小的断点，如果你没指定列宽类，元素会自动占满整行（等价于col-12）；当然你也可以明确写上col-sm-12，效果一致。

优化后的代码示例 #

<div class="content container-fluid my-2">
  <div class="row">
    <div class="col-md-6 col-lg-3 p-3">
      <div class="boxs pb-2">
        <img src="./images/images (1).jpeg" alt="">
        <a>example1</a>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 p-3">
      <div class="boxs pb-2">
        <img src="./images/images (2).jpeg" alt="">
        <a>example2</a>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 p-3">
      <div class="boxs pb-2">
        <img src="./images/images (3).jpeg" alt="">
        <a>example3</a>
      </div>
    </div>
    <div class="col-md-6 col-lg-3 p-3">
      <div class="boxs pb-2">
        <img src="./images/images.jpeg" alt="">
        <a>example4</a>
      </div>
    </div>
  </div>
</div>

额外优化提示 #

外层的content容器里，你之前加的col-lg-12 col-md-12 col-sm-12属于冗余代码——container-fluid本身就是100%宽度的容器，加上这些列类会和容器样式冲突，建议直接去掉。

栅格核心规则（替代教程） #

1. Bootstrap采用12列布局，断点分为：xs(<576px)、sm(≥576px)、md(≥768px)、lg(≥992px)等。
2. 类名格式为col-[断点]-[列数]，省略断点则适用于所有屏幕。
3. 向上兼容：大断点未指定样式时，会继承小断点的设置；小断点样式不会覆盖大断点的指定样式。
4. 未指定列宽的断点，元素默认占满整行（col-12）。

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