Bootstrap 5栅格移动端布局问题：列堆叠而非横向排列

你的代码在大屏显示正常，但移动端列会堆叠，核心问题有两个：一是超小屏幕（xs断点，<576px）未给剩余列设置栅格类，二是CodePen中可能未正确引入Bootstrap依赖。

问题分析 #

• 你用d-none d-sm-block隐藏了第一列和倒数第二列，这意味着在xs屏（<576px）时这两列确实会隐藏，但剩余的logo、title、menu只设置了col-sm-*类——Bootstrap中col-sm-*仅对≥576px的屏幕生效，xs屏时这些列会默认占100%宽度，自然堆叠。
• CodePen中官网示例也堆叠，是因为没在CodePen的设置里引入Bootstrap的CSS文件，缺少栅格样式支撑，列必然垂直排列。

修正代码 #

给剩余列添加xs断点的栅格类，确保超小屏下也能横向分配宽度：

<div class="container">
    <div class="row">
        <div class="col-lg-1 d-none d-sm-block">date</div>
        <!-- 新增xs断点类，确保小屏也横向排列 -->
        <div class="col-lg-3 col-sm-2 col-xs-2">logo</div>
        <div class="col-lg-5 col-sm-9 col-xs-9">title</div>
        <div class="col-lg-2 d-none d-sm-block">cat</div>
        <div class="col-lg-1 col-sm-1 col-xs-1">menu</div>
    </div>
</div>

如果使用Bootstrap 5，col-xs-*已简化为col-*，代码调整为：

<div class="container">
    <div class="row">
        <div class="col-lg-1 d-none d-sm-block">date</div>
        <div class="col-lg-3 col-sm-2 col-2">logo</div>
        <div class="col-lg-5 col-sm-9 col-9">title</div>
        <div class="col-lg-2 d-none d-sm-block">cat</div>
        <div class="col-lg-1 col-sm-1 col-1">menu</div>
    </div>
</div>

额外注意事项 #

• 确保项目中正确引入Bootstrap的CSS文件，CodePen里需在「Settings」→「CSS」→「Add External Stylesheets/Pens」中添加Bootstrap的CDN链接。
• 检查每个断点下（lg、sm、xs/）显示的列宽度总和是否为12，避免出现换行或空白。

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