与 btn-toolbar 中的 Bootstrap btn-groups 大小相等答案

【问题标题】：equal sizing with Bootstrap btn-groups within btn-toolbar与 btn-toolbar 中的 Bootstrap btn-groups 大小相等
【发布时间】：2025-12-11 13:30:01
【问题描述】：

我有两个按钮组，每个按钮组在一个工具栏中包含两个按钮（总共 4 个按钮），并且希望每个按钮的大小相同，并均匀分布在父 div 中（在本例中为引导列。是否有这样做的简单方法？

JSfiddle：https://jsfiddle.net/jh9sdurg/

第一行是我正在使用的：标签长度不等的按钮，第二行是我希望它看起来如何的示例，但我只能使用相等长度的标签来实现这一点（例如。'a ', 'b', 'c')。

<body>
<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <div class="row">
                <div class="btn-toolbar">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active" id="qwerty">a<input id="qwerty" type="radio"></label><label class="btn btn-default" id="lButton1">aa<input id="qwerty" type="radio"></label>
                    </div>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active" id="qwerty">bbbbb<input id="qwerty" type="radio"></label><label class="btn btn-default" id="qwerty">bb<input id="qwerty" type="radio"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="background: gray;">
            col-xs-9
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <div class="row no-gutters">
                <div class="btn-toolbar">
                    <div class="btn-group btn-block-3" data-toggle="buttons">
                        <label class="btn btn-default btn-block-2 active" id="qwerty">aa<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">aa<input id="qwerty" type="radio"></label>
                    </div>
                    <div class="btn-group btn-block-3" data-toggle="buttons">
                        <label class="btn btn-default btn-block-2 active" id="qwerty">bb<input id="qwerty" type="radio"></label><label class="btn btn-default btn-block-2" id="qwerty">bb<input id="qwerty" type="radio"></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-9" style="background: gray;">
            col-xs-9
        </div>
    </div>
</div>

【问题讨论】：

如果您不介意它们是全角的，请在.btn-groups 上使用.btn-group-justified。

标签： html css twitter-bootstrap

【解决方案1】：

您可以通过使用另一个 css 文件或内联样式来覆盖 Bootsrap 样式。我采用了一种简单快捷的方法来解决此问题，即在每个按钮上添加style = width:50%;。它们看起来像这样：

<label class="btn btn-default active" id="qwerty" style= "width: 50%">a<input id="qwerty" type="radio"></label>
<label class="btn btn-default" style= "width: 50%"id="lButton1">aaa<input id="qwerty" type="radio"></label>

我忘了添加我将按钮包裹在 <div class = "col-xs-1"> </div> 中，如果您不添加，那么按钮将填充它们最初所在的 <div class = "col-xs-3"></div>。像这样：

【讨论】：

在组上设置 width: 50% 的问题是它会导致第二组换行。
请允许我测试一下@bws1999
我明白你的意思了，我要通勤回家，我明天再试试看。对不起。尝试使用引导偏移或对齐类。