ブートストラップのアラインメントの問題

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-horizontalで任意の.form-group Sを囲む必要があり、適切に整合させるために。たとえば、次のように

<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です。

EDIT：

あなたはまた、あなたのコンテンツがform-control-staticクラスとタグに包まれていることを確認する必要があります。 @Html.DisplayForのデフォルトの動作ではテキストが出力され、役に立たなかったHTML属性が出力されます。