Bootstrap怎么设置一个div固定宽度另一个弹性填充-Bootstrap教程-PHP中文网

不能直接用col-*类实现左侧固定右侧自适应，因其基于百分比缩放（如col-2在lg下从200px缩至165px），违背固定像素要求；必须用d-flex容器+flex-shrink-0+显式width控制左侧+flex-grow-1控制右侧。

bootstrap怎么设置一个div固定宽度另一个弹性填充

直接用 col-3 和 col-9 不行，因为它们是比例制，不是固定+弹性混合；真正能稳住“左侧 240px、右侧自动填满”的组合，必须脱离栅格类，改用 d-flex + 显式宽度 + flex-grow-1。

为什么 col-* 类无法实现固定+弹性混合

Bootstrap 的 col-* 类本质是 flex: 0 0 X%，所有列都按百分比切分，没有“一个写死像素、另一个吃剩余空间”的机制。比如 col-2 col-10 在 1400px 宽度下左栏约 233px，但窗口缩到 992px 就只剩 ~165px——它根本不是固定，只是比例缩放。混用 col-2 和 flex-grow-1 更危险：两个布局引擎（栅格 vs Flex）同时作用，结果往往是左侧塌缩、右侧错位或换行。

d-flex 下左右同级子项的正确写法

父容器加 d-flex，左右子项必须平级、不嵌套 row 或 container：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

左侧固定宽元素加 flex-shrink-0 + style="width: 240px"（flex-shrink-0 防止小屏压缩，仅靠 width 不够）
右侧弹性区只加 flex-grow-1，不设 width、不加 col-* 类
避免给右侧加 min-width 或 max-width，否则会干扰 flex-grow 分配逻辑
若需响应式隐藏左侧，在左侧元素上写 d-none d-lg-flex，且 d-none 必须在前

示例结构：

<div class="d-flex">
  <div class="flex-shrink-0" style="width: 240px;">侧边栏</div>
  <div class="flex-grow-1">主内容区</div>
</div>

移动端适配与常见塌陷原因

右侧内容区不撑高、文字从左侧底下穿过，通常是因为：

父容器没设 min-vh-100 或 height: 100vh，导致 flex-grow-1 缺少参考高度
左侧用了 position: fixed 却没手动给右侧留 margin-left: 240px（flex-grow-1 不会自动避让 fixed 元素）
右侧内部有 overflow-y: auto 但没约束高度，得加 min-height: 0 或 height: calc(100vh - 60px) 才能触发滚动
IE11 不支持 flex-grow，若必须兼容，改用 CSS Grid：display: grid; grid-template-columns: 240px 1fr;