造型引導主題複選框單線標籤

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控制類有大約十幾個屬性被設置，你很可能不想要或需要。