使用CSS实现Bootstrap多行水平滚动固定宽度列网格

嘿，这个需求我刚好有类似的实现经验，用Flexbox搭配一点JavaScript就能完美解决！下面是分步的解决方案：

核心思路 #

1. 用Flexbox替代Bootstrap默认的浮动布局，让输入框容器支持水平滚动，同时保持每行4个col-md-3的布局逻辑。
2. 通过监听滚动事件，当滚动到容器边缘时，将末尾的元素移动到开头（或开头移到末尾），实现无缝循环滚动的效果。

代码实现 #

HTML结构 #

<!-- 外层滚动容器 -->
<div class="scroll-container">
  <!-- Flex布局的输入框容器 -->
  <div class="input-grid">
    <!-- 动态生成的输入框，这里用示例内容 -->
    <div class="col-md-3 input-item">输入框 1</div>
    <div class="col-md-3 input-item">输入框 2</div>
    <div class="col-md-3 input-item">输入框 3</div>
    <div class="col-md-3 input-item">输入框 4</div>
    <div class="col-md-3 input-item">输入框 5</div>
    <div class="col-md-3 input-item">输入框 6</div>
    <div class="col-md-3 input-item">输入框 7</div>
    <div class="col-md-3 input-item">输入框 8</div>
    <div class="col-md-3 input-item">输入框 9</div>
    <div class="col-md-3 input-item">输入框 10</div>
    <div class="col-md-3 input-item">输入框 11</div>
    <div class="col-md-3 input-item">输入框 12</div>
    <div class="col-md-3 input-item">输入框 13</div>
    <div class="col-md-3 input-item">输入框 14</div>
    <!-- 更多输入框... -->
  </div>
</div>

CSS样式（Flexbox核心） #

/* 外层滚动容器：限制高度，开启水平滚动 */
.scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  height: auto; /* 可以根据3行的高度设置固定值，比如calc(3 * 40px + 20px) */
  white-space: nowrap; /* 防止换行 */
}

/* Flex布局的输入框容器：保持每行4个的布局，支持横向扩展 */
.input-grid {
  display: flex;
  flex-wrap: wrap;
  width: max-content; /* 让容器宽度自适应内容总宽度 */
  min-width: 100%; /* 确保至少占满容器宽度 */
}

/* 输入框项：保留Bootstrap col-md-3的宽度逻辑，同时适配Flex布局 */
.input-item {
  flex: 0 0 25%; /* 对应col-md-3的25%宽度 */
  max-width: 25%;
  padding: 10px;
  box-sizing: border-box;
  white-space: normal; /* 恢复内部文本换行 */
}

/* 响应式适配：小屏幕下自动换行，不滚动 */
@media (max-width: 767px) {
  .scroll-container {
    overflow-x: visible;
    overflow-y: auto;
  }
  .input-grid {
    width: 100%;
  }
}

JavaScript循环滚动逻辑 #

const scrollContainer = document.querySelector('.scroll-container');
const inputGrid = document.querySelector('.input-grid');
let inputItems = document.querySelectorAll('.input-item');
let itemWidth = inputItems.length > 0 ? inputItems[0].offsetWidth : 0;
const itemsPerMove = 2; // 每次滚动后移动的元素数量，对应需求里的最后两个

// 初始化或更新元素宽度的函数（动态生成输入框后调用）
function updateItemWidth() {
  inputItems = document.querySelectorAll('.input-item');
  itemWidth = inputItems.length > 0 ? inputItems[0].offsetWidth : 0;
}

scrollContainer.addEventListener('scroll', () => {
  const scrollPosition = scrollContainer.scrollLeft;
  const containerWidth = scrollContainer.offsetWidth;
  const contentWidth = inputGrid.offsetWidth;

  // 滚动到右侧边缘时，将最后N个元素移到开头
  if (scrollPosition >= contentWidth - containerWidth - 10) { // 10px的容错值
    for (let i = 0; i < itemsPerMove; i++) {
      const lastItem = inputGrid.lastElementChild;
      inputGrid.insertBefore(lastItem, inputGrid.firstElementChild);
    }
    // 调整滚动位置，实现无缝过渡
    scrollContainer.scrollLeft -= itemWidth * itemsPerMove;
  }

  // 可选：滚动到左侧边缘时，将开头N个元素移到末尾，实现双向循环
  if (scrollPosition <= 10) {
    for (let i = 0; i < itemsPerMove; i++) {
      const firstItem = inputGrid.firstElementChild;
      inputGrid.appendChild(firstItem);
    }
    scrollContainer.scrollLeft += itemWidth * itemsPerMove;
  }
});

关键细节解释 #

1. Flexbox布局适配：用flex-wrap: wrap保持每行4个元素的布局，width: max-content让容器宽度随内容扩展，这样超过12个元素时，容器会横向延伸，触发外层的水平滚动。
2. 循环滚动逻辑：通过监听滚动位置，当接近容器边缘时，移动指定数量的元素（这里是2个）到另一侧，同时调整滚动位置，让用户感觉不到元素移动的跳跃感，实现无缝循环。
3. 动态更新支持：封装了updateItemWidth函数，动态生成输入框后调用它，就能确保滚动逻辑正常工作。
4. 响应式处理：小屏幕下关闭水平滚动，恢复Bootstrap默认的换行布局，保证移动端体验。

注意事项 #

• 如果输入框高度不固定，需要调整scroll-container的高度，避免出现垂直滚动条（或者保留垂直滚动，根据需求调整）。
• 可以根据需求调整itemsPerMove的值，控制每次滚动后移动的元素数量。

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