Bootstrap：实现嵌套列超出时外层列横向滚动而非换行

我明白你现在的需求——希望左侧外层列里的多个内层列在数量超过12个时不换行，而是让外层列出现横向滚动条。你的代码里内层列还在换行，大概率是因为默认的布局规则让它们自动折行了，咱们来调整一下：

核心思路 #

要实现这个效果，关键是让内层列的容器（也就是左侧的外层列）禁止换行，同时给它加上横向滚动的能力。

具体实现步骤 #

先补全你没写完的结构示例，再给出对应的修改方案：

示例HTML结构 #

<div class="container">
  <!-- 左侧外层列 -->
  <div class="outer-column">
    <!-- 多个内层列 -->
    <div class="inner-column">列1</div>
    <div class="inner-column">列2</div>
    <div class="inner-column">列3</div>
    <!-- ... 这里放超过12个的内层列 -->
  </div>
  <!-- 右侧区域 -->
  <div class="right-column">右侧内容区域</div>
</div>

关键CSS修改 #

.container {
  display: flex; /* 整体页面分为左右两列 */
}

.outer-column {
  /* 核心：内容超出时显示横向滚动条 */
  overflow-x: auto;
  /* 强制内层列在一行排列，禁止换行 */
  display: flex;
  flex-wrap: nowrap;
  /* 可选：优化滚动条样式 */
  scrollbar-width: thin;
}

.inner-column {
  /* 固定内层列宽度，避免被挤压变形 */
  flex: 0 0 auto;
  width: 120px; /* 可根据你的需求调整宽度 */
  margin-right: 10px; /* 可选：列之间的间距 */
  padding: 8px;
  border: 1px solid #eee;
}

.right-column {
  flex: 1; /* 让右侧列占据剩余空间 */
  padding: 16px;
}

关键属性说明 #

• overflow-x: auto：当内层列总宽度超过外层列宽度时，自动触发横向滚动条。
• flex-wrap: nowrap：强制Flex容器内的内层列保持在同一行，不会自动换行。
• flex: 0 0 auto：锁定内层列的尺寸，不让它被压缩或拉伸，保证布局稳定。

如果你用的是Grid布局，思路也类似，只需要修改外层列的CSS：

.outer-column {
  overflow-x: auto;
  display: grid;
  grid-auto-flow: column; /* 让项目按横向排列 */
  grid-auto-columns: 120px; /* 每个内层列的固定宽度 */
  gap: 10px; /* 列间距 */
}

这样修改后，当内层列数量超过12个时，就会在左侧外层列里横向排列，超出部分可以通过滚动查看，不会再自动换行啦。

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