Bootstrap小屏幕col对齐异常及移动端内容溢出问题求助

嘿，我一眼就看出几个导致你布局出问题的关键点，咱们一步步来修复：

1. 修正Bootstrap布局层级 #

你把.container放在了.row里面，这完全搞反了Bootstrap的标准布局结构！正确的层级应该是：

.container / .container-fluid → .row → .col-*

反过来放会破坏Bootstrap内置的 gutter（列间距）机制，直接导致小屏幕下的布局错乱和内容溢出。

2. 规范网格列的使用 #

你给列同时设置了col-md-2、col-md-10、col-sm-4，这里有两个问题：

• 同一断点下的列宽度要凑满12格（比如md断点下，2+10=12是对的，但sm断点下你只给了左边导航col-sm-4，右边内容没设置对应的col-sm-8，导致对齐混乱）
• 列类应该直接加到内容容器上，而不是嵌套在错误的层级里

3. 修复内容溢出问题 #

你给.listCont设置了固定height:400px，小屏幕下内容高度很容易超过这个值，直接溢出框架。换成max-height:400px再配合overflow-y:auto，让内容在超出高度时可以滚动，而不是乱跑。

修正后的完整代码示例 #

<div class="container">
  <div class="row listCont" style="max-height:400px; overflow-y:auto;">
    <!-- 左侧导航 -->
    <ul class="nav nav-pills nav-stacked col-md-2 col-sm-4">
      <li class="active"><a href="#class" data-toggle="pill">Class</a></li>
      <li><a href="#lab" data-toggle="pill">Lab</a></li>
    </ul>
    <!-- 右侧内容区域 -->
    <div class="col-md-10 col-sm-8">
      <!-- 这里放你的内容 -->
      <div class="pill-content">
        <div id="class" class="pill-pane active">Class内容...</div>
        <div id="lab" class="pill-pane">Lab内容...</div>
      </div>
    </div>
  </div>
</div>

额外小提示 #

• 如果不需要固定高度，可以直接去掉max-height和overflow-y的设置，让布局自适应内容
• 要是想让导航在极小屏幕（xs）下也正常显示，可以加上col-xs-12（Bootstrap 3）或col-12（Bootstrap 4+），让导航占满整行，内容换行到下面

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