gap sconosciuto prima di input-gruppo-addon in mora asp.net mvc 5 modello

Question

come riprodurre:

1. creare nuovo progetto ASP.Net MVC
2. aggiungere un modello
3. aggiungere un controller con impalcature vista
4. aprire il Create.cshtml in del browser, quindi modificare qualsiasi "forma-gruppo" utilizzando Firebug o strumenti di sviluppo:

Da:

<div class="form-group"> 
    <label class="control-label col-md-2" for="Name">Name</label> 
    <div class="col-md-10"> 
     <input name="Name" class="form-control text-box single-line" id="Name" type="text" value=""> 
    </div> 
    <span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="Name"></span> 
</div> 

A:

<div class="form-group"> 
    <label class="control-label col-md-2" for="Title">Title2</label> 
    <div class="col-md-10"> 
     <div class="input-group"> 
     <input name="Title" class="form-control text-box single-line" id="Title" type="text" value=""> 
     <span class="input-group-addon">@</span> 
     </div> 
    </div> 
</div> 

abbiamo appena messo "input" all'interno di un "div" con "class = 'input-gruppo'" e aggiunto un "input-gruppo-addon"

il risultato è molto strano, sembra che questo: http://i.imgur.com/ylpYJKh.png

ma il risultato corretto è questo: http://jsfiddle.net/6t3d9z8e/

si tratta di un bug con modello predefinito ASP.Net MVC 5 o cosa?

Answer 1

È un bug interessante nell'interazione tra i cst di bootstrap e gli stili di default di Microsoft.

Vedere il file css predefinito "Sito.css" e rimuovere il blocco dopo il commento Set width on the form input elements since they're 100% wide by default, dove impostare la proprietà max-width sugli input.

E se si desidera limitare l'immissione in base alle dimensioni, è necessario eseguire le classi col-md-... del bootstrap.

Answer 2

Osservando gli screenshot, è molto chiaro che MVC5 sta sovrascrivendo le proprietà di input di bootstrap predefinite.

Aggiungi il codice CSS di seguito al tuo foglio di stile. Questo risolverà il problema.

.input-group .text-box { width: 100%; }