如何在Bootstrap 5.3中实现响应式行布局调整？

布局需求 #

• 屏幕宽度≥991px（Bootstrap lg断点及以上）：三个元素横向排列，item1占1/4宽度，item2占1/2宽度，item3占1/4宽度
• 屏幕宽度<991px：item1和item3各占1/2宽度，并排显示在第一行；item2占满整行宽度，显示在第二行

实现代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<div class="row">
    <div class="bg-info col-6 col-lg-3">item 1</div>
    <div class="bg-warning col-12 col-lg-6">item 2</div>
    <div class="bg-primary col-6 col-lg-3">item 3</div>
</div>

布局逻辑解释 #

• Bootstrap采用移动优先的栅格系统，先定义小屏（<991px）下的布局规则：
  • col-6：让item1和item3在小屏时各占1/2的容器宽度，自动并排
  • col-12：让item2在小屏时占满整行宽度
• 大屏（≥991px）时，用col-lg-*类覆盖小屏布局：
  • col-lg-3：item1和item3在大屏时各占1/4的容器宽度
  • col-lg-6：item2在大屏时占1/2的容器宽度
• 背景色类（bg-info、bg-warning、bg-primary）仅用于区分元素，可按需替换或移除

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