Question

我正在尝试水平对齐我的视图表单页面，但无法找到方法。这是页面的快照。请帮忙。例如，城市和城市名称未对齐。我怎么能这样做？

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>

Answer 1

为了使horizontal forms正确对齐，您必须使用.form-group包围任何.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@example.com</p>
    </div>
  </div>
</form>

这是runnable example。

编辑：

您还需要确保您的内容包含在form-control-static类的标记中。 @Html.DisplayFor的默认行为只会输出文本，使您尝试应用的HTML属性无效。

对齐引导程序的问题

1 个答案: