html - 单行带有标签的样式 Bootstrap 主题复选框

Question

我正在尝试在标签标记内的复选框上使用 Bootstrap “表单控件”类，以便单击文本时也会选中文本框。

这是 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 时，"is"文本被推到单独的一行。尝试 2 时，复选框和底层控件被拉到页面的宽度，这也将"is"文本推到第二行。截图如下:

这是我正在尝试做的事情:

• 样式化的复选框显示在"is"旁边
• 选择文本也会选中复选框
• 保持解决方案干净(尽量避免处理 float:left 或文本上的 jquery 单击事件以选中复选框)

似乎必须有一种普通的方式来做到这一点。所有 Bootstrap 文档只显示标准复选框 - form-control 类没有为他们漂亮的内联示例设置复选框样式。

Answer 1

删除 class="form-control"从你的复选框。正如 Bootstrap 文档所述:

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default.

jsFiddle example

.form-control 类设置了大约十几个您很可能不想要或不需要的属性。