Bootstrap 5使用vr类实现垂直分隔线时宽度异常问题

Bootstrap 5的.row是flex弹性布局容器，所有直接子元素默认遵循弹性宽度分配规则：

• 直接插在两列之间的.vr元素没有添加.col相关类，不属于栅格规则下的列元素，flex布局会给它分配自动宽度，且默认允许它拉伸占据剩余空间
• 原生.vr类本身仅生成1px宽的分隔线，但被flex拉伸后会占据多余的栅格宽度，最终呈现的分隔线区域就远宽于预期的1px。

以下两种方案都可以实现符合预期的垂直分隔效果，按需选择即可： #

方案1：保留官方vr类，嵌套在窄列容器中 #

不要把.vr直接作为.row的直接子元素，给它包裹一层宽度适配内容的列容器，避免它被弹性拉伸：

<!DOCTYPE html>
<html>
<head>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<title>Page Title</title>
</head>
<body>

<div class="row g-0">
    <div class="col">
        <input type="text" class="form-control" placeholder="First name" aria-label="First name">
    </div>
    <!-- 分隔线用col-auto容器包裹，宽度只适配内容 -->
    <div class="col-auto px-2">
        <div class="vr h-100"></div>
    </div>
    <div class="col">
        <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="bootstrap.bundle.min.js"></script>
</body>
</html>

关键配置说明：

• 外层.row加g-0去掉默认栅格间隙，避免布局错位
• 分隔线父容器用.col-auto类，宽度完全匹配内部内容，不会被弹性拉伸抢占多余空间
• 父容器加px-2控制分隔线和两侧输入框的间距，可根据需要调整数值
• .vr加h-100让分隔线撑满整行高度，和两侧输入框高度对齐

方案2：无需额外DOM元素，直接用列边框实现 #

不需要插入额外的分隔标签，直接给列加边框生成分隔线，代码更简洁，性能更好：

<div class="row">
    <div class="col pe-3 border-end">
        <input type="text" class="form-control" placeholder="First name" aria-label="First name">
    </div>
    <div class="col ps-3">
        <input type="text" class="form-control" placeholder="Last name" aria-label="Last name">
    </div>
</div>

关键配置说明：

• 给左侧列加border-end生成1px宽的右边框，直接作为两列的分隔线
• 左侧列加pe-3、右侧列加ps-3控制列和分隔线的间距，数值可按需调整

内容的提问来源于stack exchange，提问作者aman girma