Bootstrap 如果调整回与页面加载时相同的大小，列布局会在调整大小时中断

Question

如果我加载我的页面，一切都很好。 <div class="sidebar"> 恰好使用 320px，而 <div class="col"> 使用左侧剩余的 space。两个 div 都在一排（并排）。

如果我放大浏览器 window，一切仍然很好（div 是并排的）。

如果我现在将浏览器 window 变小（加载页面时缩小到原始大小），布局会立即中断（<div class="sidebar"> 低于 <div class="col">现在）。

如果我现在重新加载浏览器 window，一切都会恢复正常。

左边的 <div class="col"> 似乎重新渲染得不够快。因此，当减小 window 大小时，边栏会放在 <div class="col">.

下方

是否有另一种布局方式：一种 div 侧边栏使用固定宽度，另一种 div 使用灵活宽度（space 留在边栏旁边的行中边栏）。

我正在使用以下标记：

<div class="row">
    <div class="col">
    ...
    </div>
    <div class="sidebar">
    ...
    </div>
</div>

CSS:

.sidebar {
    width: 320px;
    padding: 10px 10px 0;
    background: #FFFFFF;
    margin-bottom: 20px;
    z-index: 1;
    display: block;
}

页面加载时的屏幕截图（浏览器 window = 1095 像素）：

放大和缩小浏览器 window 后的屏幕截图（加载页面时的原始大小（浏览器 window = 1095px）！）：

Answer 1

使用calc

.sidebar {
  width: 320px;
}
.col {
  width: calc(100% - 320px);
}

sidebar 将覆盖 320px 宽度，col 将覆盖所有剩余的 space.

Bootstrap column layout breaks on resize if resized back to the same size as on page load