Bootstrap 3.2工具栏，其间有难看的单选按钮

Question

HI我正在尝试使用bootstrap 3.2绘制一个单选按钮列表，我已经用工具栏中的按钮包围，我假设这会在每个按钮旁边绘制按钮，按钮之间没有间隙。

相反，它绘制了一系列带有圆边的按钮，每个按钮之间有一个间隙

我的bowser是“Version 39.0.2171.65 Ubuntu 14.04（64-bit）”，所以我假设我有一个现代的布局引擎。我认为这可以“开箱即用”

我的代码中有一个引用bootstrap.css

我错过了什么吗？

代码是

<div class='btn-toolbar' role='toolbar' aria-label='...'>
<h2>Buttons</h2>
<div id='btn-group btn-group-justified' role='group' data-toggle='buttons' aria-label='...'>
<label class="btn btn-primary">
<input type='radio' id='layer1Button' autocomplete='off' name='options' >Fee
</label>
<label class='btn  btn-primary'>
<input type='radio' id='layer2Button' autocomplete='off' name='options' >Fie
</label>
<label class='btn  btn-primary'>
<input type='radio' id='layer3Button' autocomplete='off' name='options' >Foe
</label>
<label class='btn  btn-primary'>
<input type='radio' id='layer4Button' autocomplete='off' name='options' >Foo
</label>
</div>
</div>

Answer 1

试试这个：

Jsfiddle

<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
<input type="radio" id="layer1Button" autocomplete="off" name="options" > Fee
</label>
 <label class="btn btn-primary">
<input type="radio" id="layer2Button"  autocomplete="off" name="options"  >Fie
</label>
 <label class="btn btn-primary">
<input type="radio" id="layer3Button"  autocomplete="off" name="options"  >Foe
</label>
<label class="btn  btn-primary">
<input type="radio" id="layer4Button"  autocomplete="off" name="options"  >Foo
</label>
</div>