Twitter Bootstrap：正確的方式對齊複選框與複選框標籤

Question

我想從O'Reilly書 Bootstrap by Jake Spurlock以下三個示例。當我將代碼粘貼到JSFiddle 中時，它會突出顯示紅色錯誤，大概是因爲在標籤元素中嵌入複選框 輸入元素不會生成有效的HTML。

<!-- First example from book's Bootstrap CSS -> Forms section: --> 
<form> 
    <fieldset> 
    <legend>Legend</legend> 
    <label for="name">Label name</label> 
    <input type="text" id="name" placeholder="Type something…"> 
    <span class="help-block">Example block-level help text here.</span> 
    <label class="checkbox" for="checkbox"> 
     <input type="checkbox" id="checkbox"> 
     Check me out 
    </label> 
    <button type="submit" class="btn">Submit</button> 
    </fieldset> 
</form> 

<!-- Second example from book's Bootstrap CSS -> Forms section: --> 
<form class="form-inline"> 
    <input type="text" class="input-small" placeholder="Email"> 
    <input type="password" class="input-small" placeholder="Password"> 
    <label class="checkbox"> 
    <input type="checkbox"> 
    Remember me 
    </label> 
    <button type="submit" class="btn">Sign in</button> 
</form> 

<!-- Third example from book's Bootstrap CSS -> Forms section: --> 
<form class="form-horizontal"> 
    <div class="control-group"> 
    <label class="control-label" for="inputEmail">Email</label> 
    <div class="controls"> 
     <input type="text" id="inputEmail" placeholder="Email"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
    <div class="controls"> 
     <input type="password" id="inputPassword" placeholder="Password"> 
    </div> 
    </div> 
    <div class="control-group"> 
    <div class="controls"> 
     <label class="checkbox"> 
     <input type="checkbox"> 
     Remember me 
     </label> 
     <button type="submit" class="btn">Sign in</button> 
    </div> 
    </div> 
</form> 

尤其是在這三種情況下，導致了HTML錯誤的代碼如下：

 <label class="checkbox"> 
     <input type="checkbox"> 
     Remember me 
     </label> 

以下related post看來對付同樣的問題 但答案的代碼沒有按」似乎解決了我描述的HTML問題。

那麼什麼是風格引導形式的正確方法，使這個HTML 是有效的，使瀏覽器正確顯示的複選框，然後通過自身單行選框文本 ？我寧願回答 ，不需要創建任何自定義CSS。

Answer 1

對於類標籤應控制標籤，多選無效

<div> 
    <label class="control-label"> 
    <input type="checkbox"> 
    Remember me 
    </label> 
</div> 
<button type="submit" class="btn">Submit</button>