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

Question

我正在尝试使用bootstrap＆＃34; form-control＆＃34;标签标签内的复选框上的类，以便单击文本也检查文本框。

这是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，＆＃34;是＆＃34;文本被推送到单独的行。通过尝试2，复选框和底层控件被拉到页面的宽度，这也推动了＆＃34;是＆＃34;文字到第二行。截图如下：

这就是我要做的事情：

• 样式复选框显示在＆＃34;是＆＃34;
旁边
• 选择文字也会选中复选框
• 保持解决方案干净（尝试避免在文本上处理float:left或jquery点击事件以选中复选框）

似乎必须有一种香草的方式来做到这一点。所有引导程序文档都只显示标准复选框 - form-control类没有任何内容样式化其内嵌示例的复选框。

Answer 1

从复选框中删除class="form-control"。正如bootstrap docs所述：

  

所有文字<input>，<textarea>和<select>元素   .form-control设置为width：100％;默认情况下。

<强> jsFiddle example

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

Answer 2

以下是我提出的解决问题的方法。我需要在checkbox元素上保留.form-control类，以便复选框控件由引导主题设置样式。我的业务要求是使用主题而非默认浏览器复选框。

请在此处查看JSFiddle：https://jsfiddle.net/vpm13m2b/3/

input[type=checkbox].form-control {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: -8px;
}

上面的css已添加到我网站的样式表中，因此表单控件复选框保留了样式，我不必更改包含复选框和标题的标签的现有代码复选框的右侧垂直居中。

这适用于我在下面的html上的原始尝试（＃1）：

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

结果输出符合我在原始问题中寻找的内容：