Bootstrap 4：容器尺寸改变时如何实现列自动重排？

这个问题我之前也碰到过，核心原因在于Bootstrap 4的栅格系统是基于父容器的实际可用宽度来计算列布局的，但你通过修改left属性只是移动了容器的位置，并没有真正改变容器的可用宽度；另外，浏览器只有在窗口尺寸变化时才会自动触发布局重算，手动修改元素位置不会触发这个机制。下面给你几个可行的解决方案，按推荐优先级排序：

方案1：用Bootstrap原生栅格整合菜单与内容区（最推荐） #

这是最贴合Bootstrap设计逻辑的方式，完全利用栅格的自动响应特性：

• 把左侧菜单和右侧内容容器放在同一个row里，用col类控制各自的宽度
• 通过切换类来显示/隐藏菜单，内容区的col会自动占据剩余宽度，内部的子列也会随之重排

示例代码：

<div class="container-fluid">
  <div class="row">
    <!-- 左侧菜单，默认隐藏 -->
    <div id="sidebar" class="col-md-3 d-none bg-light">
      <p>菜单选项1</p>
      <p>菜单选项2</p>
    </div>
    <!-- 右侧内容容器 -->
    <div id="content-container" class="col-md-9">
      <div class="row">
        <div class="col-sm-6 col-lg-3 p-3 bg-primary text-white">内容列1</div>
        <div class="col-sm-6 col-lg-3 p-3 bg-secondary text-white">内容列2</div>
        <div class="col-sm-6 col-lg-3 p-3 bg-success text-white">内容列3</div>
        <div class="col-sm-6 col-lg-3 p-3 bg-danger text-white">内容列4</div>
      </div>
    </div>
  </div>
</div>

<button onclick="toggleSidebar()">切换菜单</button>

<script>
function toggleSidebar() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.toggle('d-none');
  
  // 如果需要更平滑的宽度过渡，可以替换d-none为col的切换：
  // sidebar.classList.toggle('col-md-3');
  // sidebar.classList.toggle('col-0');
  // document.getElementById('content-container').classList.toggle('col-md-9');
  // document.getElementById('content-container').classList.toggle('col-12');
}
</script>

方案2：修改容器宽度而非left属性 #

如果你坚持要手动调整容器的位置，那不如直接修改容器的可用宽度，让栅格系统能感知到变化：

• 给内容容器添加一个自定义类，通过margin-left和calc()计算容器宽度
• 切换类时，容器的实际宽度改变，内部列会自动重排

示例代码：

/* 自定义类：菜单显示时的容器样式 */
.content-with-sidebar {
  margin-left: 250px; /* 菜单宽度 */
  width: calc(100% - 250px);
  transition: all 0.3s ease; /* 可选：添加过渡动画 */
}

<div id="content-container" class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-3 p-3 bg-primary text-white">内容列1</div>
    <div class="col-sm-6 col-lg-3 p-3 bg-secondary text-white">内容列2</div>
    <div class="col-sm-6 col-lg-3 p-3 bg-success text-white">内容列3</div>
    <div class="col-sm-6 col-lg-3 p-3 bg-danger text-white">内容列4</div>
  </div>
</div>

<button onclick="toggleSidebar()">切换菜单</button>

<script>
function toggleSidebar() {
  const contentContainer = document.getElementById('content-container');
  contentContainer.classList.toggle('content-with-sidebar');
}
</script>

方案3：手动触发resize事件（hack方式） #

这种方式属于“曲线救国”，通过触发窗口的resize事件来强制浏览器重算布局，但可能会影响其他依赖resize事件的代码，所以只作为备选：

function showSidebar() {
  const contentContainer = document.getElementById('content-container');
  // 修改left值
  contentContainer.style.left = '250px';
  // 手动触发resize事件
  window.dispatchEvent(new Event('resize'));
}

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