ASP MVC 5和Bootstrap中表单控件的不正确对齐 [英] Incorrect aligning of form controls in ASP MVC 5 and Bootstrap
问题描述
我一直在寻找解决方案，但是到目前为止没有发现任何问题，这让我发疯了.
I have been looking for a solution for this, but nothing found so far, and it's making me go crazy.
首先，我是Web开发的新手，使用ASP MVC，Bootstrap，Ajax，Javascript等，因此，如果这里有一些糟糕的代码，请原谅.
First of all, I'm new to web development, with ASP MVC, Bootstrap, Ajax, Javascript and so on, so I beg your pardon if there is some atrocious code here.
我们去问一个问题:
我有一个带有ASP MVC 5和Bootstrap的项目，其中有一些表单.问题是，使用水平表单"类，我无法很好地对齐控件，表单组的一个控件与另一个控件对齐，但是右边的控件有点升级".最好显示一下:
I have a project with ASP MVC 5 and Bootstrap, with some forms in it. The problem is, using the "form-horizontal" class, I can't align the controls in a good way, one control of a form-group aligns next to the other, but the control that is on the right it's a bit "upped". It's better to show it:
如您所见，这是使用Visual Studio的默认项目完成的.对齐方式不好可能在文本框中没有很好地显示，但是在Field3的ValueFor中却很清楚.
As you can see, this has been made using the default project of Visual Studio. Maybe the bad alignment it's not shown very well in the textboxes, but in the ValueFor of Field3 it's very clear.
这是该表格使用的代码.很简单:
Here is the code used for that form. It's pretty simple:
@model PruebaAuth3.Models.PruebaFormViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<body>
<br />
<div class="panel panel-primary">
<div class="panel-heading">Panel title</div>
<div class="panel-body">
@using (Html.BeginForm("SubmitForm", "PruebaForm", FormMethod.Post))
{
<div class="form-horizontal">
@Html.HiddenFor(model => model.Id)
<div class="form-group">
<div class="control-label col-md-2"><b>@Html.LabelFor(model => model.Field1)</b></div>
<div class="col-md-10">
@Html.EditorFor(model => model.Field1)
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2"> <b>@Html.LabelFor(model => model.Field2)</b></div>
<div class="col-md-10">
@Html.EditorFor(model => model.Field2)
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2"> <b>@Html.LabelFor(model => model.Field3)</b></div>
<div class="col-md-10">
@Html.ValueFor(model => model.Field3)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
}
</div>
</div>
</body>
任何帮助将不胜感激.预先感谢.
Any help would be appreciated. Thanks in advance.
推荐答案
label 元素与 input相比默认情况下具有创建的code>元素.而 7px 的最高边距 EditorFor ValueFor (默认情况下)只是在DOM中创建一个文本节点.您只需要将相同的 margin-top 样式应用于ValueFor输出或Parent Div.
label elments have 7px top margin, by default, as compared to input elements created by EditorFor. While ValueFor (by default) just creates a text node in DOM. You just need to apply same margin-top style to ValueFor output or Parent Div.
<div class="form-group">
<div class="control-label col-md-2">
<b>@Html.LabelFor(model => model.Field3)</b>
</div>
<div class="col-md-10" style="margin-top:7px">
@Html.ValueFor(model => model.Field3)
</div>
</div>
请注意，我建议您为此创建一个CSS类，而不是在此处使用样式标签.
Note i would suggest that you create a CSS class for it instead of using style tag here.
这篇关于ASP MVC 5和Bootstrap中表单控件的不正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
