Bootstrap 5移动端列布局问题：为何手机端列未按50%宽度显示？

你的问题出在没有给手机端（xs断点）设置列宽类。Bootstrap 5采用移动优先的栅格系统，默认情况下列会自动堆叠（占100%宽度），只有添加对应断点的类，才会按指定比例分配宽度。

如果你的代码里只使用了col-md-6、col-lg-6这类针对中等/大屏幕的类，手机端（xs断点，宽度<576px）就会触发默认的堆叠行为，导致列占满100%宽度，而非预期的50%。

修复方法 #

有两种方式可以让手机端列占50%宽度：

• 直接使用不带断点前缀的col-6，这个类会作用于所有屏幕尺寸（包括手机）：

<div class="container">
  <div class="row">
    <div class="col-6">第一列</div>
    <div class="col-6">第二列</div>
  </div>
</div>

• 如果你需要不同屏幕有不同布局（比如手机50%，平板及以上33%），可以叠加断点类：

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">第一列</div>
    <div class="col-6 col-md-4">第二列</div>
    <div class="col-6 col-md-4">第三列</div>
  </div>
</div>

关键知识点 #

Bootstrap 5的栅格断点：

• xs：<576px（手机）
• sm：≥576px（平板竖屏）
• md：≥768px（平板横屏/小桌面）
• lg：≥992px（桌面）
• xl：≥1200px（大桌面）
• xxl：≥1400px（超大桌面）

移动优先意味着，小屏幕的样式会被大屏幕继承，除非你为大屏幕单独设置不同的类。

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