Bootstrap布局需求：左侧与中间列优先保留尺寸再缩放

当然可以实现！你的需求核心是优先收缩空白和间距，尽可能保留内容区域的尺寸，结合Bootstrap的flex布局能力和少量自定义CSS就能轻松搞定。

核心思路 #

1. 用container替代container-fluid：container本身就会在窗口缩小时自动收缩左右两侧的空白，完美契合你“先缩小右侧空白”的需求；
2. 给侧边栏和内容列设置最小宽度，确保它们在空间充足时保持原有尺寸；
3. 侧边栏和内容列之间的间距用一个可弹性收缩的元素实现，让它优先被压缩，而非使用固定的margin/padding；
4. 当窗口宽度小于侧边栏+内容列的最小宽度总和时，通过Bootstrap的响应式特性让列自动堆叠。

完整代码示例 #

<!-- 引入Bootstrap资源 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<style>
  /* 自定义最小宽度，确保内容区域优先保留尺寸 */
  .sidebar {
    min-width: 200px;
    flex-shrink: 0; /* 禁止侧边栏优先收缩 */
  }
  .content-area {
    min-width: 400px;
    flex-shrink: 0; /* 禁止内容列优先收缩 */
  }
  /* 可收缩的间距元素：优先被压缩，最小宽度为0 */
  .flex-spacer {
    flex-grow: 1;
    flex-shrink: 999;
    min-width: 0;
    width: 1rem; /* 默认间距大小 */
  }
</style>

<div class="container">
  <div class="row d-flex align-items-start">
    <!-- 侧边栏 -->
    <div class="sidebar bg-danger text-white p-3">
      Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>Sidebar<br>
    </div>
    <!-- 可弹性收缩的间距 -->
    <div class="flex-spacer"></div>
    <!-- 内容区域 -->
    <div class="content-area bg-warning p-3">
      Content<br>Content<br>Content<br>Content<br>Content<br>
    </div>
  </div>
</div>

效果说明 #

• 窗口足够宽时：container保持最大宽度，侧边栏、间距、内容列按设置的尺寸排列，右侧空白由container自动控制；
• 窗口逐步缩小时：首先收缩container的左右空白，接着中间的flex-spacer被压缩（从默认1rem缩至0）；
• 窗口宽度小于侧边栏+内容列最小宽度总和时：row会自动让列堆叠，完全符合响应式需求。

额外优化 #

如果想要在指定断点（比如md尺寸）后才让列堆叠，可以给row添加flex-md-nowrap flex-wrap类，这样md及以上尺寸时列不换行，md以下自动堆叠：

<div class="row d-flex align-items-start flex-md-nowrap flex-wrap">
  <!-- 侧边栏、间距、内容列 -->
</div>

这样就完美匹配你“尽可能保留内容尺寸，仅在窗口足够小时调整内容大小”的需求啦！

内容的提问来源于stack exchange，提问作者Gábor Kiss-Vámosi