Html 设置引导主题复选框的样式，标签在单行上

我试图在标签标签内的复选框上使用引导“form control”类，以便单击文本也会选中文本框

以下是JSFIDLE：

控件的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
*
对

尝试1时，“是”文本被推到单独的一行。尝试2时，复选框和基础控件被拉到页面的宽度，这也会将“是”文本推到第二行。下面是此操作的屏幕截图：

以下是我正在尝试做的：

• 已设置样式的复选框显示在“是”旁边
• 选择文本也会选中复选框
• 保持解决方案干净（尝试避免处理

  float:left

  或jquery单击文本上的事件以选中复选框）

似乎必须有一个普通的方法来做到这一点。所有引导文档都只显示标准复选框-没有使用

表单控件

类设置复选框的样式以显示其漂亮的内联示例。

从复选框中删除

class=“表单控件”

。正如引导文档所述：

所有文本

，

和

元素 .窗体控件设置为宽度：100%；默认情况下

---

.form控件类设置了十几个您可能不想要或不需要的属性。

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

请参见此处的工作JSFIDLE：

上面的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>

尝试#1
*
对

结果输出与我在原始问题中寻找的匹配：

---

是否希望标签位于复选框的左侧或右侧？文本将位于文本框的右侧，但表单控件类使复选框能够在主题中设置样式。您可以为其编写任何样式，而无需添加该类。您可以在示例中看到，没有一个复选框示例具有该类。但正如我的需求所述，我需要样式化的复选框来处理主题，并且我尽量不在这里创建我自己的UI（即：类似于.form control的并行代码，但不完全如此）。我感谢你的帮助+请注意。表单控件默认将控件样式设置为100%宽度-这非常有用。

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