为什么水平形式不会水平显示元素？

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