Bootstrap：如何防止页面缩放时侧边栏与主内容区折叠？

你的问题核心是Bootstrap的响应式栅格偏移在小屏幕断点失效，加上侧边栏是固定定位，导致主内容区缩小时跑到侧边栏下面被遮挡。下面是具体的解决方案：

问题分析 #

你移除了@media规则让侧边栏保持展开，但主内容区用的col-md-offset-2是个响应式类——只有在屏幕宽度≥768px（md断点）时才会生效，当屏幕缩小到这个断点以下，Bootstrap会自动移除这个偏移，同时col-md-10会变成100%宽度，这就直接和固定定位的侧边栏重叠了。

具体修改方案 #

我们需要让主内容区始终保持足够的左边距，同时确保页面能横向滚动来适配小屏幕（而不是折叠内容）。

第一步：修改HTML结构 #

移除主内容区的col-md-offset-2类，因为我们要自定义固定偏移，不需要响应式的偏移：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
    </div>
    <div class="col-md-10 main"> <!-- 这里移除了col-md-offset-2 -->
      <h1 class="page-header">Dashboard</h1>
      <h2 class="sub-header">Section title</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
              <th>Header</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>

第二步：更新自定义CSS #

添加以下关键样式，确保主内容区始终和侧边栏保持间距，同时支持横向滚动：

/* 让页面在窄屏时可以横向滚动，实现水平适配 */
body {
  overflow-x: auto;
}

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  width: 220px; /* 给侧边栏设置固定宽度，方便主内容计算偏移 */
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
}

.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

.nav-sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.main {
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 10px;
  display: block;
  margin-left: 220px; /* 与侧边栏宽度完全一致，确保不会重叠 */
  width: calc(100% - 220px); /* 让主内容区占满侧边栏以外的剩余宽度 */
}

.main .page-header {
  margin-top: 0;
}

/* 可选：给极窄屏幕设置主内容最小宽度，保证内容可读性 */
@media (max-width: 480px) {
  .main {
    min-width: 320px;
  }
}

为什么这样改？ #

• 固定侧边栏宽度：用width:220px替代Bootstrap的响应式宽度，让主内容区的偏移量可以精准匹配
• 主内容区固定偏移：margin-left:220px确保无论屏幕多大，主内容都不会跑到侧边栏下面
• 横向滚动支持：body {overflow-x:auto}让页面在宽度不足时可以横向滚动，实现你要的“水平适配”而不是折叠内容
• 移除响应式偏移：col-md-offset-2只在大屏生效，小屏会失效，所以直接移除改用固定偏移

这样修改后，不管怎么缩放页面，主内容区都会始终在侧边栏右侧，不会被遮挡，同时页面能横向滚动适配各种屏幕尺寸。

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