对齐问题与引导
我想水平对齐我的视图表单页面,但无法找出一种方法。以下是该页面的快照。请帮忙。例如,城市和城市名称不一致。我怎样才能做到这一点 ?对齐问题与引导
For example, the city and the city name are not aligned
<div class="well well-sm">
<h4>Contact Information</h4>
<div class="form-group">
@Html.LabelFor(model => model.MailingAddress, htmlAttributes: new { @class = "control-label col-md-2 " })
<div class="col-md-10">
@Html.DisplayFor(model => model.MailingAddress, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.MailingAddress) } })
</div>
</div>
</div>
为了horizontal forms正确对准你必须围绕任何.form-group
s的一个.form-horizontal
。例如:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
</form>
这里有一个runnable example。
编辑:
您还需要确保您的内容被包裹在与form-control-static
类的标签。 @Html.DisplayFor
的默认行为将只输出文本,使您尝试应用的HTML属性无用。
还应该注意的是,DisplayFor字面上只会呈现文本,而不是元素。因此,你不能以这种方式向它添加一个类。 –
@DanOrlovsky DisplayFor的输出取决于它们是否定义了DisplayTemplate。但是你是正确的,如果他们没有DisplayTemplate,那么它将不能正确对齐。我会更新答案。 – jebar8
你可以请包括代码? –
如果您覆盖CSS中的任何样式,请将其包含在内。 –
我没有覆盖任何CSS样式。这里是我的代码: – User123