html - Bootstrap .btn-group-justified in a .form-horizo​​ntal

Question

我尝试在 bootstrap 中使用 btn-group-justified 类来让一对按钮占据整个父宽度。尽管我的代码看起来与我正在关注的示例几乎相同，但我的页面看起来完全错误，好像按钮的宽度为 0。经过一些试验，我发现问题似乎是按钮带有 窗体水平类。我尝试了这段代码来隔离问题:

<form>
    <div class='form-group btn-group btn-group-justified' data-toggle='buttons'>
        <label class='btn btn-default btn-lg active'>
            <input type='radio' name='option' value='1' /> Option 1
        </label>
        <label class='btn btn-default btn-lg'>
            <input type='radio' name='option' value='2' /> Option 2
        </label>
    </div>
</form>
<form class='form-horizontal'>
    <div class='form-group btn-group btn-group-justified' data-toggle='buttons'>
        <label class='btn btn-default btn-lg active'>
            <input type='radio' name='option' value='1' /> Option 1
        </label>
        <label class='btn btn-default btn-lg'>
            <input type='radio' name='option' value='2' /> Option 2
        </label>
    </div>
</form>

JSFiddle

看起来 form-horizo​​ntal 确实是问题所在，但奇怪的是，使用 Inspect Element 浏览器功能，我无法确定是什么原因造成的。在我的检查器中，我没有看到包含违规按钮的 form-horizo​​ntal 选择器。

谁能阐明为什么会发生这种情况？ btn-group-justified 类不应在 form-horizo​​ntal 中使用是否有原因，或者这是一个错误？

Answer 1

form-group 不应该作为 form-horizo​​ntal form 的 div 类存在

它应该是这样的:

<form class='form-horizontal'>
    <div class='btn-group btn-group-justified' data-toggle='buttons'>
        <label class='btn btn-default btn-lg active'>
            <input type='radio' name='option' value='1' />Option 1</label>
        <label class='btn btn-default btn-lg'>
            <input type='radio' name='option' value='2' />Option 2</label>
    </div>
</form>