MVC - 引导程序形式控件将在下一行与形式组

我想使用引导程序formgroup。如果我有一个控件的单个标签&，但是如果有多于2个控件（标签，控件和验证字段），那么验证字段将进入下一行。MVC - 引导程序形式控件将在下一行与形式组

我尝试使用form-inline，但没有运气。任何人都可以告诉我如何保持form-group的所有元素在一行中？

 <div class="form-group"> 
      @Html.Label("Emp ID", new { @class = "col-sm-2 control-label" }) 
      <div class="col-sm-10"> 
       @Html.TextBoxFor(model => model.EmpID, new { disabled = "disabled", @class = "form-control" }) 
      </div> 
     </div> 

     @* Tried with form-group *@ 
     <div class="form-group"> 
      @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" }) 
      <div> 
       @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" }) 
       @* This validation goes in next line, how can we keep it in the same line *@ 
       @Html.ValidationMessageFor(model => model.EmployementTypeID) 
      </div> 
     </div> 

     @* Tried with form-inline *@ 
     <div class="form-inline"> 
      @Html.LabelFor(model => model.Address, Constants.Address, new { @class = "col-sm-2 control-label" }) 
      <div> 
       @Html.TextAreaFor(model => model.Address, new { @class = "form-control col-sm-10" }) 
      @* This validation goes in next line, how can we keep it in the same line *@ 
       @Html.ValidationMessageFor(model => model.Address) 
      </div> 
     </div>

来源

2014-02-12 Atul Sureka

把所有的div在另一个div标签&设置类为“形式横”。下面是示例代码

<div class="form-horizontal" style="height: 250px"> 
    <div class="form-group"> 
     <div class="col-lg-3"> 
      @Html.Label("My Label 1", new { @class = "control-label" }) 
     </div> 
     <div class="col-lg-6"> 
      @Html.TextBox("My Label 1", "My Label Message1", 
       new { @class = "form-control" }) 
     </div> 
     <div class="col-lg-3"> 
      @Html.Label("Error Message", new { @class = "form-label" }) 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="col-lg-3"> 
      @Html.Label("My Label 2", new { @class = "control-label" }) 
     </div> 
     <div class="col-lg-6"> 
      @Html.TextBox("My Label 2", "My Label Message2", 
       new { disabled = "disabled", @class = "form-control" }) 
     </div> 
    </div> 
</div>

检查http://getbootstrap.com/css/#forms“水平表”获取更多详细信息。

希望这会起作用。

Annu

来源

2014-02-17 06:52:52

谢谢，它为我工作... Atul Sureka –

感谢您的链接！ – Shimmy

尝试将您的class="col-sm-10"添加到您的所有div中。

像这样：

<div class="form-group"> 
    @Html.LabelFor(model => model.EmployementTypeID, Constants.EmploymentType, new { @class = "col-sm-2 control-label" }) 
    <div class="col-sm-10"> 
     @Html.DropDownListFor(model => model.EmployementTypeID, new SelectList(Model.EmploymentType, "EmployementTypeID", "EmployementTypeName", Model.EmployementTypeID), new { @class = "form-control" })     
     @Html.ValidationMessageFor(model => model.EmployementTypeID) 
    </div> 
</div>

来源

2014-02-12 06:35:11 FSou1

**这是正确的**在ASP MVC检查[这里]（http://www.w3schools.com/bootstrap/bootstrap_forms.asp）使用引导水平表格更多的方式。 – stom

MVC - 引导程序形式控件将在下一行与形式组

回答

相关问题