Bootstrap 2 中应根据设备适配需求选择:固定布局用 container(宽940px,小屏易出现横向滚动),流式布局用 container-fluid 配 row-fluid(宽100%,需配合响应式CSS才能断点生效),二者互斥且不可混用。

Bootstrap 2 中流式布局和固定布局怎么选
Bootstrap 2 的流式(fluid)和固定(fixed)布局是两套互斥的容器体系,不能混用,切换靠替换最外层容器类,不是靠 JS 或媒体查询动态切换。
固定布局用 container,宽度硬编码为 940px(含左右 padding),小屏下会横向滚动;流式布局用 container-fluid,宽度为 100%,内容随视口拉伸,但子元素仍依赖 row + span* 计算百分比宽度。
-
container内必须用row→span*,否则栅格不生效 -
container-fluid同样要配row-fluid(不是row),否则子项宽度计算错乱 - 两者都需引入
bootstrap-responsive.css才有断点行为,否则流式也只在桌面生效
Bootstrap 4/5 里还有 fixed 和 fluid 的概念吗
没有了。Bootstrap 4 起彻底废弃 container-fluid / container 的二分法,统一用 container,但赋予响应式断点变体:container-sm、container-md 等——它们本质都是“流式容器”,只是最大宽度在不同断点被限制。
例如:container 在 lg 断点以上最大宽为 960px,container-fluid 只是 max-width: 100% 的别名,实际已退化为一个语义提示。
- 想模拟旧版“固定布局”?用
container即可,它在 >=lg 屏下就是固定像素宽 - 想完全撑满?直接上
container-fluid,但注意子栅格(col)默认仍按 flex 分配,非百分比 - 别再找
row-fluid——Bootstrap 4+ 的row本身就是流式 flex 容器
为什么加了 container-fluid 还不“流”
常见错因:只改了容器,没调子项的栅格类或未启用响应式工具类。Bootstrap 4+ 的流式表现取决于三者协同:
- 容器用
container-fluid(提供 100% 宽度上下文) - 行用
row(默认display: flex) - 列用带断点的
col-md-6或无断点的col(col表示等分,col-md-6表示中屏起占半宽)
如果子项写成 col-xs-12(Bootstrap 2 语法)或漏掉 col 类,就会退化为 block 元素,宽度不受控。错误示例:<div class="container-fluid"><div class="row"><div>内容</div></div></div>——中间 div 没 col,不会参与栅格计算。
响应式切换的本质是 max-width,不是 display
很多人以为“切换布局”要改 display 或 JS 控制 class,其实 Bootstrap 的响应式容器逻辑极简单:container 在每个断点设一个 max-width,仅此而已。
比如 container-md 表示:视口 <768px 时宽度为 100%,>=768px 时锁定为 720px;container 则从 lg(992px)起才设 max-width。
- 真要实现“小屏流式 + 大屏固定”,直接用
container就够——它本来就是这么设计的 - 若需更细粒度控制(如 600px 下也设 max-width),得自己写 CSS 覆盖
container的max-width - 切记:所有容器类都只管宽度,对内部 flex 方向、换行、对齐毫无影响,那是
flex-row/flex-wrap等类的事
最容易被忽略的是:Bootstrap 的“流式”从来不是指“内容自动缩放”,而是指容器宽度可变 + 栅格按比例分配——字体、图片、间距全靠额外工具类或自定义 CSS 控制。


















