asp.net-mvc MVC - bootstrap -form 控件与 form-group 排在下一行
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21720399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
MVC - bootstrap -form control is coming in next line with form-group
提问by Atul Sureka
I want to use bootstrap formgroup. It works if I have a single label & a control but if there are more than 2 controls (label, control and validation field) then validation field goes in next line.
我想使用引导程序表单组。如果我有一个标签和一个控件,但如果有 2 个以上的控件(标签、控件和验证字段),则验证字段会进入下一行。
I tried using form-inline but no luck. Can anybody please tell me how to keep all the elements of form-group in a single line?
我尝试使用 form-inline 但没有运气。谁能告诉我如何将表单组的所有元素保留在一行中?
<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>
回答by Maxim Zhukov
Try to add your class="col-sm-10"into all of your div.
尝试将您添加class="col-sm-10"到您的所有 div 中。
Like this:
像这样:
<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>

