爲什麼橫向格式不能水平顯示元素？

Question

我的剃刀代碼產生了這樣的事情：

<div class="container col-sm-4" style="background-color: wheat"> 
    <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label> 
     <input class="form-control col-sm-10" id="FirstName" name="FirstName" type="text" value=""> 
    </div> 
    </form> 
</div> 

但爲什麼它顯示在新的一行標籤？我想他們是橫向彼此相鄰，我所定義的形式，水平太

Answer 1

這裏的問題是一個微妙的 - 你試圖用.form-control元素作爲一列，它干擾Bootstrap腳手架系統的設計。查看.form-control適用的樣式，其中一個是width:100%，這將使元素比.col-sm-10應該更寬（這就是爲什麼它打破了下一行）。

看着documentation example，他們通過將.form-control嵌套在<div>的內部來解決此問題，並將其替換爲<div>。因此請相應修改您的代碼：

<div class="container col-sm-4" style="background-color: wheat"> 
    <form action="/AwfulSite/Search/Index" class="form-horizontal" method="post" role="form"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label" for="FirstName" style="text-align: right">FirstName</label> 
     <div class="col-sm-10"> 
     <input class="form-control" id="FirstName" name="FirstName" type="text" value=""> 
     </div> 
    </div> 
    </form> 
</div> 

這是example Bootply。希望這可以幫助！如果您有任何問題，請告訴我。