如何让btn-group按钮组内的单选按钮保持宽度一致？

该需求可以实现，有两种常用的实现方案：

方案1：使用Bootstrap内置工具类（无需额外编写CSS） #

你已经为外层容器添加了d-flex类，只需给每个按钮对应的label标签添加flex-fill类，即可让两个按钮等分父容器的全部宽度，修改后代码如下：

<div class="d-flex btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
    <label class="btn btn-outline-primary flex-fill" for="btnradio1">Text</label>
    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-primary flex-fill" for="btnradio2">More Text</label>
</div>

flex-fill是Bootstrap官方提供的弹性布局工具类，作用是让弹性项尽可能填充可用空间，多个同级元素添加该类后会自动均分容器宽度。

方案2：自定义CSS规则 #

如果需要全局控制所有btn-group内的按钮均分宽度，或不想逐个给标签加类，可以添加如下CSS规则：

.btn-group .btn {
  flex: 1 1 0;
}

该规则将flex-basis设为0，会完全忽略按钮自身的内容宽度，严格按照均分逻辑分配宽度，适合对宽度一致性要求更高的场景。如果需要避免按钮过窄导致文本折行，可以额外添加min-width: fit-content做兼容。

内容的提问来源于stack exchange，提问作者Ben Sullivan