col-*类不能直接设固定宽度，因其本质为flex项目，依赖flex:1 1 0，width会被忽略；需用flex:none+width实现固定宽，且需确保父容器为row。

为什么 col-* 类不能直接设固定宽度？

Bootstrap 5 的 col 类本质是 flex 项目，依赖 flex: 1 1 0 实现等分或响应式分配，width 值会被 flex 引擎忽略。直接写 width: 200px 在 div class="col"> 上基本无效——除非你先覆盖掉 flex 行为。

用 flex: none + width 强制固定列宽

这是最轻量、兼容性好（Bootstrap 4/5 都适用）的做法：保留栅格结构，只让特定列“脱离弹性伸缩”。

• 给目标列添加自定义类，比如 col-fixed
• 在 CSS 中写：

  .col-fixed {
    flex: none;
    width: 240px; /* 任意固定值，支持 rem/em/px */
  }

• 确保父容器仍是 row（否则 flex 不生效）
• 注意：该列不再响应 col-md-* 等断点类，需自行用媒体查询控制不同屏幕下的 width

避免和 col-auto 混用

col-auto 是根据内容撑开宽度，不是固定宽度。它和 flex: none 效果相似但机制不同——col-auto 依赖 flex: 0 0 auto，宽度由内容决定，无法精确控制像素值。

VPS Bootstrap

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

下载

• 想固定 180px？不能只靠 col-auto
• 若同时加 col-auto col-fixed，后者会覆盖前者，但语义混乱，建议只用 col-fixed
• 如果列内有长文本或图片，记得加 overflow: hidden 或 white-space: nowrap 防溢出

用 grid-column 替代（仅限 Bootstrap 5.3+ 的 CSS Grid 模式）

Bootstrap 5.3 开始支持 row-cols-* 和显式 grid 列定义，但原生 col-* 仍是 flex。若你已启用 bootstrap-grid-only.css 或手动切换为 grid 布局，可用：

• 父容器设 display: grid，并用 grid-template-columns 定义列宽，例如：

  .my-row {
    display: grid;
    grid-template-columns: 240px 1fr 240px;
  }

• 子元素不再需要 col 类，直接按顺序填入即可
• 缺点：放弃响应式断点类（col-md-4 等失效），所有响应逻辑得手写媒体查询

固定宽度列的真正难点不在写法，而在它和 Bootstrap 响应流的天然冲突——你得明确告诉系统：“这一列，别动它”。flex: none 是最接近“无侵入”的解法，但一旦涉及多断点适配，就得自己补媒体查询，这点容易漏掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！