如何用Bootstrap 5实现移动端与桌面端的差异化布局排序

需求匹配 #

• 桌面端：5个功能项横向均匀排列
• 移动端：前3个功能项占满一行，后2个功能项居中显示在第二行

最终代码 #

<div class="row row-cols-lg-5 row-cols-md-3 align-items-center pt-2 pb-5 border-bottom border-3 border-light mb-3">
    <!-- 前3个功能项 -->
    <div class="col d-flex justify-content-center">
        <a href="#" class="text-decoration-none text-secondary d-flex align-items-center">
            <img src="{{ asset('icons/cash-on-delivery.svg') }}" alt="">
            <p class="ms-3 mb-0 small">امکان تحویل اکسپرس</p>
        </a>
    </div>
    <div class="col d-flex justify-content-center">
        <a href="#" class="text-decoration-none text-secondary d-flex align-items-center">
            <img src="{{ asset('icons/cash-on-delivery.svg') }}" alt="">
            <p class="ms-3 mb-0 small">امکان تحویل اکسپرس</p>
        </a>
    </div>
    <div class="col d-flex justify-content-center">
        <a href="#" class="text-decoration-none text-secondary d-flex align-items-center">
            <img src="{{ asset('icons/cash-on-delivery.svg') }}" alt="">
            <p class="ms-3 mb-0 small">امکان تحویل اکسپرس</p>
        </a>
    </div>
    <!-- 后2个功能项：移动端居中 -->
    <div class="col d-flex justify-content-center col-md-3 offset-md-3">
        <a href="#" class="text-decoration-none text-secondary d-flex align-items-center">
            <img src="{{ asset('icons/cash-on-delivery.svg') }}" alt="">
            <p class="ms-3 mb-0 small">امکان تحویل اکسپرس</p>
        </a>
    </div>
    <div class="col d-flex justify-content-center col-md-3">
        <a href="#" class="text-decoration-none text-secondary d-flex align-items-center">
            <img src="{{ asset('icons/cash-on-delivery.svg') }}" alt="">
            <p class="ms-3 mb-0 small">امکان تحویل اکسپرس</p>
        </a>
    </div>
</div>

代码解释 #

1. 响应式列控制：
   • row-cols-lg-5：桌面端（≥992px）一行显示5个元素，每个元素自动分配均等宽度
   • row-cols-md-3：平板及以下设备一行显示3个元素，前3个自动占满一行
2. 移动端居中处理：
   • 后2个元素添加col-md-3 offset-md-3，让它们在移动端占据中间6列（3列偏移+3列宽度+3列宽度），实现居中效果
3. 对齐优化：
   • d-flex justify-content-center保证每个功能项在列内水平居中
   • align-items-center让图标和文字垂直对齐，保持视觉一致性
4. 样式继承：保留了原代码中的边距、边框等样式，确保和原有设计统一

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