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

Question

如果我加载我的页面，一切都很好。 <div class="sidebar">使用恰好 320px 而 <div class="col">使用左边的剩余空间。两个 div 排成一行(并排)。

如果我放大浏览器窗口，一切都还好(div 是并排的)。

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

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

好像左边<div class="col">重新渲染的速度不够快。因此，当减小窗口大小时，侧边栏放在 <div class="col"> 下面.

是否有另一种方法来制作这样的布局:一个 div 为侧边栏使用固定宽度，另一个 div 使用灵活宽度(侧边栏旁边的行中剩余的空间)。

我正在使用以下标记:

<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;
}

页面加载时的屏幕截图(浏览器窗口 = 1095 像素):

放大和缩小浏览器窗口大小后的屏幕截图(加载页面时的原始大小(浏览器窗口 = 1095px)!):

实例:https://www.lotsearch.net/artist/pablo-picasso

Answer 1

使用计算

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

sidebar 将覆盖 320px 宽度，col 将覆盖所有剩余空间。