如何使用Bootstrap在單行中獲取多個複選框？

我必須在表格中顯示所有7天的一週。他們現在越來越顯示像這樣：如何使用Bootstrap在單行中獲取多個複選框？

Messed up alignment

有了這個代碼：

<div class="form-group"> 
    <label class="col-md-4 control-label" for="checkboxes">Day(s) of Week</label> 
    <div class="col-md-4"> 
    <label class="checkbox-inline" for="checkboxes-0"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1"> 
     Su 
    </label> 
    <label class="checkbox-inline" for="checkboxes-1"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-1" value="2"> 
     Mo 
    </label> 
    <label class="checkbox-inline" for="checkboxes-2"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-2" value="3"> 
     Tu 
    </label> 
    <label class="checkbox-inline" for="checkboxes-3"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-3" value="4"> 
     We 
    </label> 
    <label class="checkbox-inline" for="checkboxes-4"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-4" value="5"> 
     Th 
    </label> 
    <label class="checkbox-inline" for="checkboxes-5"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-5" value="6"> 
     Fr 
    </label> 
    <label class="checkbox-inline" for="checkboxes-6"> 
     <input type="checkbox" name="checkboxes" id="checkboxes-6" value="7"> 
     Sa 
    </label> 
    </div> 
</div>

如何讓所有的人都顯示出一行/行？

在此先感謝。

來源

2015-05-29 Codehelp

安排他們的表 – Santhucool

這已經是行內內。檢查Bootstrap.http：//www.bootply.com/BoCPhlIYTm容器的寬度是多少？ –

使您的色譜柱更寬。您可能在屏幕太窄的情況下觀看了此視頻。你可以將它設置爲「col-md-8」。 –

把你的代碼中container和row如下面的代碼

<div class="container"> 
    <div class="row"> 
     //Your code 
    </div> 
</div>

代碼

<div class="container"> 
<div class="row"> 
<label class="col-md-12 control-label" for="checkboxes">Day(s) of Week</label> 
</div> 
<div class="row"> 
<div class="form-group"> 
<label class="col-md-1 checkbox-inline" for="checkboxes-0"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1"> 
    Su 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-1"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-1" value="2"> 
    Mo 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-2"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-2" value="3"> 
    Tu 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-3"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-3" value="4"> 
    We 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-4"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-4" value="5"> 
    Th 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-5"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-5" value="6"> 
    Fr 
</label> 
<label class="col-md-1 checkbox-inline" for="checkboxes-6"> 
    <input type="checkbox" name="checkboxes" id="checkboxes-6" value="7"> 
    Sa 
</label> 
</div> 
</div> 
</div>

來源

2015-05-30 15:53:29

如何使用Bootstrap在單行中獲取多個複選框？

回答

相關問題