在.form-horizo​​ntal中引导.btn-group-justified

Question

我试图在bootstrap中使用btn-group-justified类来尝试使一对按钮占用整个父宽度。尽管我的代码看起来几乎与我所遵循的示例相同，但我的页面看起来完全错误，好像按钮的宽度为0.经过实验后，我发现问题似乎是按钮带有{{ 1}}类。我试用了这段代码来解决问题：

form-horizontal

JSFiddle

看起来<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> 确实是问题所在，但奇怪的是使用Inspect Element浏览器功能，我无法确定导致此问题的原因。在我的检查器中，我看到没有包含form-horizontal的选择器用于违规按钮。

有人能说清楚为什么会这样吗？是否有理由不在form-horizontal中使用btn-group-justified类或这是一个错误？

Answer 1

form-group不应该作为一个表格 - 水平形式的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>

Answer 2

类form-horizontal类设置在错误的元素上。当设置为第二种形式的子div时：<div class='form-horizontal form-group btn-group btn-group-justified' data-toggle='buttons'>它按照您的意图从第一种形式复制外观。这是form-group按钮的样式，而不是form父元素的样式。

Answer 3

您的form-horizontal

<div class='form form-horizontal' data-toggle='buttons'>
    <div class="btn-group btn-group-justified" role="group" aria-label="...">
        <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>
</div>

Justified button groups：

  

要使用带有<button>元素的对齐按钮组，必须将每个按钮包装在按钮组中。大多数浏览器都没有正确地将我们的CSS用于<button>元素的理由，但由于我们支持按钮下拉，我们可以解决这个问题。

Horizontal form：

  

使用Bootstrap的预定义网格类，通过在表单中​​添加.form-horizo​​ntal（它不必是<form>），在水平布局中对齐表单控件的标签和组。这样做会改变.form-groups以表现为网格行，因此不需要.row。