为什么横向格式不能水平显示元素？

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。希望这可以帮助！如果您有任何问题，请告诉我。