如何使用Bootstrap 5网格系统？解决多设备布局异常问题

你的需求可以通过Bootstrap的响应式列类精准实现，核心是给每个容器添加对应断点的列宽类：

• 移动端（小屏幕，<576px）：每个容器占满整行，用col-12
• 平板（中等屏幕，≥768px）：一行4个，每个占25%宽度，用col-md-3（12列网格中，12/4=3）
• 桌面（大屏幕，≥992px）：一行6个，每个占1/6宽度，用col-lg-2（12/6=2）

完整代码示例：

<div class="container">
  <div class="row">
    <div class="col-12 col-md-3 col-lg-2">容器1</div>
    <div class="col-12 col-md-3 col-lg-2">容器2</div>
    <div class="col-12 col-md-3 col-lg-2">容器3</div>
    <div class="col-12 col-md-3 col-lg-2">容器4</div>
    <div class="col-12 col-md-3 col-lg-2">容器5</div>
    <div class="col-12 col-md-3 col-lg-2">容器6</div>
  </div>
</div>

关键注意事项： #

• 所有列必须放在.row容器内，.row要嵌套在.container或.container-fluid中，这是Bootstrap网格的核心结构要求
• 确保项目中正确引入了Bootstrap的CSS文件，没有引入的话所有网格类都不会生效
• 列类的优先级是“断点越大优先级越高”，比如大屏幕下col-lg-2会覆盖col-md-3，中等屏幕下col-md-3覆盖col-12，自动适配不同设备

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