間距不工作

我寫這樣的：

  <div class="form-group"> 
       <div class="col-sm-offset-2 col-sm-8"> 
        @Html.Label("Name", new {@class = ".control-label"}) 
        @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"}) 

        @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline col-sm-offset-4"}) 
        @Html.Label("Show Email in Footer", new {@class = ".control-label"}) 
       </div> 
      </div>

，但它使得它看起來是這樣的：

看到它沒有spaci NG。我該如何解決？

來源

2016-04-15 Bohn

你試過把'.row'放在你的第二個div上嗎？ –

@WellingtonZanelli好吧，我試了一下，它把最後兩個到下一行，不再內聯。 – Bohn

好的，所以我的想法是將'col-sm- *'放入代碼中的每個元素中，將它們分配到一行中。我現在無法測試它作爲答案，對不起。 –

你可能會想要更像這樣的東西來獲得你想要的風格。我對生成的HTML看起來並不積極，但我相信這會讓你走上正軌。

<div class="row> 
    <div class="col-sm-offset-2 col-sm-6">  
     <div class="form-group"> 
      @Html.Label("Name", new {@class = ".control-label"}) 
      @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"}) 
     </div> 
    </div> 
    <div class="col-sm-4">  
     <div class="form-group"> 
      @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline"}) 
      @Html.Label("Show Email in Footer", new {@class = ".control-label"}) 
     </div> 
    </div> 
</div>

Bootstrap還具有嵌入式表單的樣式。 http://getbootstrap.com/css/#forms-inline

<form class="form-inline"> 
    <div class="form-group"> 
     @Html.Label("Name", new {@class = ".control-label"}) 
     @Html.DropDownList("nameadmin", new SelectList(Enumerable.Range(77881, 5)), new {@class = "dropdown"}) 
    </div> 
    <div class="checkbox"> 
     @Html.CheckBox("ShowEmailInFooter", new {@class = "checkbox-inline"}) 
     @Html.Label("Show Email in Footer", new {@class = ".control-label"}) 
    </div> 
</form>

來源

2016-04-15 20:27:49 mrdeleon

謝謝，第一個看起來更好。我應該確保他們加起來是12？目前我有col-sm-offset-2 + col-sm-6 + col-sm-4？ – Bohn

回答

相關問題