造型引导主题复选框与单行标签

Question

我试图在标签标签中的复选框上使用引导程序"form-control"类,以便单击文本也检查文本框.

这是JSFiddle:https://jsfiddle.net/vpm13m2b/

控件的HTML是:

<div class="form-group">
    <div>
        Attempt #1
        <span class="red">*</span>
    </div>
    <label>
        <input type="checkbox" class="form-control" /> Yes
    </label>
</div>
<div class="form-group">
    <div>
        Attempt #2
        <span class="red">*</span>
    </div>
    <label class="checkbox-inline">
        <input type="checkbox" class="form-control" /> Yes
    </label>
</div>

尝试1时,"是"文本被推送到单独的行.在尝试2中,复选框和底层控件被拉到页面的宽度,这也将"是"文本推到第二行.截图如下:

这是我想要做的:

• 样式复选框显示在"是"旁边
• 选择文本也会选中该复选框
• 保持解决方案干净(试图避免float:left在文本上处理或jquery点击事件来检查复选框)

似乎必须有一种香草的方式来做到这一点.所有的bootstrap文档都只显示标准的复选框 - form-control类的样式没有任何内容,它们的漂亮内联示例的复选框.

Answer 1

class="form-control"从复选框中删除.正如bootstrap文档所述:

所有textual <input>,<textarea>和<select>.form-control元素都设置为width:100%; 默认情况下.

jsFiddle例子

.form-control类有大约十几个你很可能不想要或不需要的属性.