如何实现Bootstrap Row列内容横向滚动而非自动换行？

没问题！要实现你想要的内容溢出时横向滚动、不换行的效果，只需要给你的.row容器添加几个CSS样式即可，具体方案如下：

完整代码示例 #

HTML部分

<div class="row scroll-row">
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
  <div class="col-sm-4">1</div>
</div>

CSS部分

.scroll-row {
  /* 强制所有列在同一行排列，禁止换行 */
  flex-wrap: nowrap;
  /* 内容溢出时显示横向滚动条 */
  overflow-x: auto;
  /* 给滚动条预留底部空间，避免内容被遮挡 */
  padding-bottom: 1rem;
  /* 可选：添加横向内边距，让首尾列不会贴紧容器边缘 */
  padding-left: 1rem;
  padding-right: 1rem;
}

.scroll-row .col-sm-4 {
  /* 禁止列被压缩，保持原有宽度 */
  flex-shrink: 0;
  /* 确保col-sm-4的宽度始终是容器的1/3，和Bootstrap栅格逻辑一致 */
  width: calc(100% / 3);
}

关键样式说明 #

• flex-wrap: nowrap：Bootstrap的.row默认是flex-wrap: wrap，这会让列在空间不足时自动换行，改成nowrap就能强制所有列在同一行排列。
• overflow-x: auto：当所有列的总宽度超过容器宽度时，自动显示横向滚动条，让用户可以横向滑动查看内容。
• flex-shrink: 0：Bootstrap的.col默认是flex-shrink: 1，空间不足时会被压缩，设置为0可以保证每列都保持原有的宽度。
• width: calc(100% / 3)：确保.col-sm-4的宽度始终是容器的1/3，和Bootstrap栅格系统的设计逻辑一致，避免小屏幕上出现宽度异常。

可选优化：自定义滚动条样式 #

如果你想让滚动条更美观，可以添加以下CSS（针对WebKit内核浏览器）：

.scroll-row::-webkit-scrollbar {
  height: 8px;
}

.scroll-row::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.scroll-row::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scroll-row::-webkit-scrollbar-thumb:hover {
  background: #555;
}

这样就能完美实现你想要的横向滚动效果啦！

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