bootstrap原生不支持col-3.5等非整数列宽，因其栅格基于12等分且仅提供整数类名；实现需绕过col-类，用flex-basis、calc()或微调负margin等底层方式，在≥992px时达成约29.166%宽度。
Bootstrap原生不支持col-3.5这类非整数列宽
Bootstrap的col-类只提供1到12的整数命名（如col-3、col-4），因为栅格系统基于12等分计算，而3.5/12 = 29.1666...%无法用标准类直接表达。你写col-3.5会被浏览器完全忽略——它不是语法错误，而是根本不存在的类名。
实现“大屏占3.5列”的三种可行路径
核心思路：绕过col-类，改用更底层的布局控制方式。关键不是“凑出3.5”，而是让元素在≥992px时视觉宽度≈3.5列（即约29.166%），同时保持响应式退化逻辑。
- 用
flex+flex-grow/flex-basis：给容器加d-lg-flex，子项用flex-lg-grow-0 flex-lg-basis-29.166%（需自定义CSS或内联style） - 用
calc()配合w-100：在lg+断点下写style="width: calc(100% / 12 * 3.5)"，小屏回退到col-12 - 用
col-lg-4+ 负margin微调：先占4列（33.333%），再加ms-lg-n2（-0.5rem）抵消部分左侧间隙，视觉上略窄——适合对精度要求不高的场景
为什么不能用offset或order硬凑
有人试图用offset-lg-3 + col-lg-4来“模拟”3.5列位置，但这只改变起始偏移，不控制自身宽度；order类更无关——它只调顺序，不调尺寸。真正要的是宽度，不是位置或层级。
另外，混用col-和flex类时，必须确保容器有d-lg-flex（而非仅d-flex），否则flex-basis在大屏下不生效。漏掉断点前缀是常见失效原因。
实际项目中最稳妥的做法
如果只是单处需要，直接加一行自定义CSS：
@media (min-width: 992px) {
.col-lg-3-5 {
flex: 0 0 calc(100% / 12 * 3.5);
max-width: calc(100% / 12 * 3.5);
}
}
然后在HTML中：<div class="col-12 col-lg-3-5">内容</div>。这样小屏仍占满，大屏精准按3.5列渲染，且不影响其他栅格行为。
注意：不要在.row上同时用col-和d-flex——.row本身已是display: flex，额外加d-lg-flex冗余且可能触发重复flex上下文，导致子项表现异常。
