如何用Bootstrap 5实现移动端两列两行+横向滚动、桌面6列布局

要实现你需要的布局效果，只需给容器添加横向滚动功能，并在移动端用Grid布局控制行列结构，具体步骤如下：

1. 修改HTML结构 #

在原row外层添加一个用于横向滚动的容器：

<div class="container">
  <!-- 添加滚动容器 -->
  <div class="scroll-container">
    <div class="row" id="content">
      <!-- 原有列内容保持不变 -->
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>عمومی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>دندان</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>رادیولوژی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>عصبی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>چشم</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>عصبی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>تغذیه</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>عصبی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>رادیولوژی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>اطفال</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>عصبی</h5>
      </div>
      <div class="col-lg-2 col-6 mb-3 text-center">
        <i class="fa-solid fa-circle"></i>
        <h5>همه</h5>
      </div>
    </div>
  </div>
</div>

2. 添加自定义CSS #

通过媒体查询针对移动端设置Grid布局和横向滚动：

/* 针对lg断点以下的移动端设备 */
@media (max-width: 991px) {
  .scroll-container {
    overflow-x: auto;
    /* 可选：优化滚动条样式 */
    scrollbar-width: thin;
  }
  
  #content {
    display: grid;
    /* 固定为2行结构 */
    grid-template-rows: repeat(2, auto);
    /* 列自动排列，超出宽度后横向滚动 */
    grid-auto-flow: column;
    /* 每列占50%宽度，实现两列布局 */
    grid-template-columns: 50%;
    /* 容器宽度自适应内容总宽度 */
    width: fit-content;
    /* 移除Bootstrap row默认负边距，避免滚动时出现多余空白 */
    margin: 0;
  }
  
  /* 重置移动端col-6的默认样式，避免和Grid布局冲突 */
  #content .col-6 {
    width: 100%;
    max-width: 100%;
    flex: none;
  }
}

效果说明 #

• 桌面端（≥992px）：保持原Bootstrap 6列布局（col-lg-2），内容自动换行展示。
• 移动端（<992px）：内容以2行×2列的结构展示，超出可视区域的部分可横向滚动，完全匹配你的设计需求。

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