Bootstrap栅格布局：如何让col-md列随视口宽度自适应不换行？

嘿，我完全懂你遇到的困扰——Bootstrap的栅格系统是移动端优先设计的，默认在md断点（992px）以下会自动让列堆叠，这时候左侧col-md-3的列就会占满整个页面宽度，高度也会跟着内容撑满，确实不太符合文件管理界面的预期。这里有几个实用的解决方案，你可以根据需求选：

方案1：改用更小的断点类，保持列在小屏幕也并排 #

如果希望左右列在比992px更小的屏幕上依然保持并排，你可以把col-md-*换成更小断点的类：

• 要是想在768px以上保持并排，用col-sm-3和col-sm-9
• 要是想在所有屏幕尺寸下都保持并排（哪怕是手机窄屏），Bootstrap 4+直接用col-3和col-9（因为Bootstrap 4默认xs断点是0px，col-*就是对应xs的宽度）

示例代码：

<div class="container">
  <div class="row">
    <!-- 左侧文件夹列：所有屏幕占3份宽度 -->
    <div class="col-3">
      <!-- 你的文件夹选择组件 -->
    </div>
    <!-- 右侧文件列表列：所有屏幕占9份宽度 -->
    <div class="col-9">
      <!-- 你的文件列表组件 -->
    </div>
  </div>
</div>

方案2：允许堆叠，但优化堆叠后的布局 #

如果还是想在小屏幕让列堆叠，但不希望左侧列占满整个页面高度，可以给左侧列加高度限制和滚动条，这样即使内容多也不会撑满页面：

示例代码：

<div class="container">
  <div class="row">
    <div class="col-md-3" style="max-height: 80vh; overflow-y: auto;">
      <!-- 文件夹选择内容 -->
    </div>
    <div class="col-md-9">
      <!-- 文件列表内容 -->
    </div>
  </div>
</div>

这里max-height: 80vh让左侧列最多占视口高度的80%，overflow-y: auto在内容超过高度时显示垂直滚动条，体验会好很多。

方案3：自定义媒体查询，强制小屏幕保持并排 #

如果你想精确控制断点（比如在800px以上都保持并排），可以写自定义的CSS媒体查询：

/* 在屏幕宽度小于992px（md断点）但大于768px时，强制列并排 */
@media (max-width: 991px) and (min-width: 768px) {
  .folder-col {
    width: 25%;
    float: left;
  }
  .file-col {
    width: 75%;
    float: left;
  }
}

对应的HTML：

<div class="container">
  <div class="row">
    <div class="col-md-3 folder-col">
      <!-- 文件夹选择 -->
    </div>
    <div class="col-md-9 file-col">
      <!-- 文件列表 -->
    </div>
  </div>
</div>

我之前做类似的文件管理界面时，方案1和方案2用得最多，根据你的适配需求选就行~

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