對齊問題與引導

我想水平對齊我的視圖表單頁面，但無法找出一種方法。以下是該頁面的快照。請幫忙。例如，城市和城市名稱不一致。我怎樣才能做到這一點？對齊問題與引導

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

對齊問題與引導

回答

相關問題