我有两个按钮组,每个按钮组包含一个工具栏中的两个按钮(总共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>
答案 0 :(得分: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>
。
像这样: