在btn-toolbar中使用Bootstrap btn-groups进行相等的大小调整

时间:2016-12-08 21:44:38

标签: 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>

1 个答案:

答案 0 :(得分:1)

您可以使用其他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