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

标签 html css twitter-bootstrap

我有两个按钮组,每个按钮在工具栏中包含两个按钮(总共 4 个按钮),并且希望每个按钮大小相同,并均匀分布在父 div 中(在本例中为 Bootstrap 列。是否有简单的方法来做到这一点?

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>

最佳答案

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

<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>他们原来是在。 像这样: enter image description here

关于html - 与 btn-toolbar 中的 Bootstrap btn-groups 大小相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41049349/

相关文章:

css - 垂直和水平居中 FontAwesome 图标

php - 如何在 div 下定位单选按钮?

jquery - 计算 div + childs 中的 <a> 标签

html - 使用百分比 (CSS/Bootstrap) 保持容器大小相等的最佳方法

html - 试图改变主题现在我搞砸了

javascript - 使用 JS 更改 svg 的 css 填充

html - 动态对齐 :after according to parent length

javascript 网络应用程序开发

jquery - 通过单击按钮并单击所选以外的其他元素,使用 jQuery 切换类

css - 如何使用 material-ui 从 DevExtreme React Grid 获取数据表的完全控制样式?