Non in grado di applicare allineamento dei controlli in vista MVC Razor utilizzando Bootstrap 3

Question

problema dichiarazione:

In uno dei miei vista edit voglio fare testo come disabili, quindi per questo sto usando DisplayFor invece di TextboxPer. Ma quando uso Displayfor, l'allineamento non viene correttamente. Puoi vedere le immagini allegate come riferimento. Sto usando Bootstrap CSS 3.0

Qualsiasi aiuto sarebbe apprezzato. Quale CSS inline dovrei usare per allineare correttamente ??

Image1: In questa immagine si può vedere che l'etichetta ID acquisire lo status e Textboxfor correttamente allineato.

Image2: Quando uso DisplayFor invece di Textboxfor, acquisiscono l'etichetta ID Stato e Displayfor non sono allineati correttamente.

Vista:

<div class="form-horizontal"> 
     <hr /> 
     @Html.ValidationSummary(true) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.AcquirestatusID, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DisplayFor(model => model.AcquirestatusID,new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.AcquirestatusID) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.TextBoxFor(model => model.Name, new { @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Save" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 

Answer 1

ho risolto il mio problema utilizzando sola lettura attribuire alla mia Textboxfor.

@Html.TextBoxFor(model => model.AccessoriesID,new { @class = "form-control",@readonly="readonly" }) 

Dopo aver applicato sopra riga di codice mio punto di vista di modifica appare:

Answer 2

Si potrebbe accadere a causa della style.css, che è di default nel progetto.

Rimuovere style.css dal progetto

Nota: si potrebbe solo bisogno di alcune delle classi di convalida al suo interno

Answer 3

Sono d'accordo con csoueidi, verificare con gli strumenti di sviluppo su IE o ispezionare elemento su Chrome per vedere quale CSS sta caricando gli stili per quella casella di testo.

Answer 4

Se si vuole allineare il testo e non utilizzare una casella di testo, utilizzare la classe "modulo-control-statica"

<div class="col-md-10 form-control-static">@Html.DisplayTextFor(model => model.AcquirestatusID)</div>