Bootstrap 5桌面端4列移动端2列布局不生效问题求助

问题根因 #

Bootstrap 5 已正式废弃xs断点前缀，面向 <576px 最小屏幕（移动端）的栅格类不需要加xs标识，直接使用col-*格式即可。你代码里的col-xs-6属于Bootstrap 3/4的旧写法，在Bootstrap 5中是无效类，因此移动端会默认让列占满整行宽度，无法实现预期的两列布局。

修复方案 #

将所有列的类名从col-md-3 col-xs-6修改为col-md-3 col-6即可，修改后的完整代码如下：

<div class="row">
    <div class="col-md-3 col-6">
        <h3 class="news_let">
            Resources
        </h3>
        <ul class="ft_conte">
            <li>
                Desktop Client
            </li>
            <li>
                Mobile apps
            </li>
            <li>
                Form Center
            </li>
            <li>
                Margin File
            </li>
            <li>
                Margin Calculator
            </li>
            <li>
                Brokerage Calculator
            </li>
        </ul>
    </div>
    <div class="col-md-3 col-6">
        <h3 class="news_let">
            About the Company
        </h3>
        <ul class="ft_conte">
            <li>
                About Us
            </li>
            <li>
                Blog
            </li>
            <li>
                Privacy policy
            </li>
            <li>
                Term of Use
            </li>
            <li>
                Complaint Book
            </li>
            <li>
                Contact Us
            </li>
        </ul>
    </div>
    <div class="col-md-3 col-6">
        <h3 class="news_let">
            Careers
        </h3>
        <ul class="ft_conte">
            <li>
                About Us
            </li>
            <li>
                Blog
            </li>
            <li>
                Privacy policy
            </li>
            <li>
                Term of Use
            </li>
            <li>
                Complaint Book
            </li>
            <li>
                Contact Us
            </li>
        </ul>
    </div>
    <div class="col-md-3 col-6">
        <h3 class="news_let">
            Legal
        </h3>
        <ul class="ft_conte">
            <li>
                Investor
            </li>
            <li>
                Privacy policy
            </li>
            <li>
                Risk & Compliance
            </li>
            <li>
                Policy
            </li>
            <li>
                Disclaimer
            </li>
            <li>
                Filling of Complaints<br/> On SCORES
            </li>
        </ul>
    </div>
</div>

修改后对应的栅格规则完全匹配你的需求：

• 移动端（<576px）：col-6 每列占1/2行宽，自动排列为2列
• 桌面端（≥768px）：col-md-3 每列占1/4行宽，自动排列为4列

内容的提问来源于stack exchange，提问作者Mr.M