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

Question

我试图在标签标签内的复选框上使用引导“窗体控件”类，以便单击文本也检查文本框。

这里是的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

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

看这里工作的jsfiddle：https://jsfiddle.net/vpm13m2b/3/

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

CSS的上方加入到我的网站的样式表，表单控制复选框保留了风格，我没有改变具有现有的代码一个标签，复选框右侧的复选框和标题垂直居中。

这工作我原来的尝试（＃1）上的HTML如下：

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

得到的输出相匹配什么我寻找原题：

Answer 2

从您的复选框中删除class="form-control"。自举文档状态：

所有文本<input>，<textarea>，并用 .FORM控制<select>元件被设置为宽度：100％;默认。

jsFiddle example

的.FORM控制类有大约十几个属性被设置，你很可能不想要或需要。