对齐问题与引导

我想水平对齐我的视图表单页面，但无法找出一种方法。以下是该页面的快照。请帮忙。例如，城市和城市名称不一致。我怎样才能做到这一点？对齐问题与引导

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>

来源

2017-08-28 User123

你可以请包括代码？ –

如果您覆盖CSS中的任何样式，请将其包含在内。 –

我没有覆盖任何CSS样式。这里是我的代码： – User123

为了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属性无用。

来源

2017-08-28 17:46:00 jebar8

还应该注意的是，DisplayFor字面上只会呈现文本，而不是元素。因此，你不能以这种方式向它添加一个类。 –

@DanOrlovsky DisplayFor的输出取决于它们是否定义了DisplayTemplate。但是你是正确的，如果他们没有DisplayTemplate，那么它将不能正确对齐。我会更新答案。 – jebar8

对齐问题与引导

回答

相关问题