Bootstrap 4两栏等高需为.row添加d-flex激活Flex行为，分割线则需左侧列设border-right与pe-0、右侧列ps-0配合；二者机制独立，不可混用height或flex-fill等属性。
Bootstrap 4 中两栏等高 + 垂直分割线，必须分两步独立处理：等高靠 d-flex 激活 .row 的 Flex 行为，分割线靠 border-right 配合内边距归零；二者不能互相妥协，否则要么高度不一致，要么分割线消失或错位。
给 .row 加 d-flex 是等高的前提，不是可选项
Bootstrap 4 的 .row 默认是 display: block，align-items: stretch 完全无效。不加 d-flex，后面所有等高尝试都白搭。
- 直接写
<div class="row d-flex">，别手动写 <code>display: flex——d-flex已包含兼容性前缀和重置逻辑 - 确保两栏是
.row的**直接子元素**，嵌套一层<div class="row"> 就会断链，等高失效 <li>删掉任何可能覆盖 <code>display的自定义 CSS，比如.row { display: block !important; }或第三方库注入的样式 - 不要在列上设
height、min-height、flex: none，这些会锁死拉伸行为 - 左侧列加
border-right: 1px solid #dee2e6和pe-0（即padding-right: 0） - 右侧列加
ps-0（即padding-left: 0），防止左右内边距叠加导致总宽超 100% - 整个
.row不要加g-0（Bootstrap 5 才有，4 中对应no-gutters），否则列间间隙消失，分割线会陷进内容里 - 验证是否生效：打开 DevTools，看左侧列的 computed width 是否 > 0，再临时把
border-right换成background: red看渲染区域 - Bootstrap 4 不支持
border-md-end-0这类断点工具类，得手写媒体查询：@media (max-width: 768px) {<br> .left-col { border-right: none; }<br>} - 不要用
d-none或visually-hidden隐藏分割线——它们隐藏的是整个元素，不是边框 - 等高部分无需额外操作：堆叠后
.row仍是 Flex 容器，但flex-direction: column下align-items: stretch控制的是宽度而非高度，所以“不等高”是预期行为，不是 bug - 如果需要小屏下也保持某种对齐，应改用列内部的
d-flex flex-column+mt-auto控制按钮沉底，而不是强求高度一致
垂直分割线必须用 border-right + padding 归零组合，不能只靠边框
border-right 在 Bootstrap 4 的 Flex 栅格里极易“看不见”，根本原因是列默认有 padding-right 和 padding-left，边框画在内边距区域外，又被父容器裁掉。
响应式下分割线必须显式清除，等高则自然退化
小屏堆叠后还留着一条竖线，视觉上非常突兀。等高在堆叠时本就无意义，但分割线不会自动消失，必须主动控制。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的点是：等高和分割线依赖的是两个完全独立的机制——前者靠 .row 的 Flex 容器身份，后者靠列的盒模型控制。混用 h-100、flex-fill 或强行给列设 height，反而会让其中一个失效。检查时优先看 .row 的 computed display 和左侧列的 computed width，比猜更可靠。
