双飞翼布局的核心是HTML中.center前置以保障SEO与首屏渲染，再通过负边距和相对定位将.left与.right拉至两侧；Bootstrap 5栅格按书写顺序排列，无法天然支持该语义结构，需弃用col类、手动覆盖CSS实现，或改用Flex更简洁可靠。
Bootstrap 5 默认不支持双飞翼语义结构
双飞翼布局的核心是 HTML 结构上让 .center 内容在 DOM 中前置（利于 SEO 和首屏渲染），再通过 CSS 把 .left 和 .right “拉”到两侧——而 Bootstrap 的栅格系统（container/row/col）是流式顺序布局，.col 按书写顺序从左到右排列，无法天然满足“中间内容写在最前、却显示在中间”的需求。
用 Bootstrap 4/5 + 自定义 CSS 模拟双飞翼效果
不能直接靠 col-* 类实现真正的双飞翼，但可以保留 Bootstrap 的响应式工具类，仅对三栏容器手动覆盖定位逻辑：
- HTML 中仍把
.center放最前，.left和.right紧随其后（符合双飞翼结构） - 给父容器加
position: relative和overflow: hidden（触发 BFC） - 给
.center设width: 100%、float: left，并用margin: 0 200px预留左右空间（注意：不是用col） -
.left设float: left; width: 200px; margin-left: -100%，再position: relative; left: -200px -
.right设float: left; width: 200px; margin-left: -200px，再position: relative; right: -200px
此时你仍可使用 Bootstrap 的 px-* 、py-* 、text-center 等工具类修饰内容，但不要给三栏本身加 col 类——否则会干扰浮动流。
用 Flex 替代 Bootstrap 栅格更简洁
如果项目已支持 Flex 布局（IE10+），完全没必要强套 Bootstrap 栅格。直接用原生 Flex 实现双飞翼语义更干净：
.double-wing {
display: flex;
}
.center-wrapper {
flex: 1;
margin: 0 200px; /* 预留左右空间 */
}
.left, .right {
width: 200px;
}
这样 HTML 保持 <div class="center-wrapper"><div class="center">...</div></div> 结构，既满足双飞翼的嵌套语义，又免去浮动清除、负边距等易错点。Bootstrap 的间距、颜色等工具类依然可用，只是放弃 row/col 这一层抽象。
为什么别用 Bootstrap 3 的 col-xs-push/col-xs-pull
Bootstrap 3 提供过 col-xs-pull-* 和 col-xs-push-*，看似能“移动列”，但它只是改变视觉顺序，DOM 顺序和渲染顺序不变，且：
- 它基于
position: relative+left/right，不解决内容重叠问题 - 无法让
.center在 HTML 中真正前置（push/pull 是对已有列做偏移，前提仍是列按顺序写） - 在响应式断点切换时容易错乱，尤其配合
flex-wrap或高度变化时 - Bootstrap 4+ 已移除这些类，官方推荐用 Flex 或 CSS Grid 替代
真正要兼顾语义、SEO 和现代兼容性，双飞翼的“灵魂”不在栅格类，而在 HTML 结构设计 + 少量精准 CSS 控制；Bootstrap 只该作为辅助样式库，而非布局绑架器。
