Uso di input-block-level con input-start in Twitter Bootstrap 2.3.2

Question

Mi chiedo come rendere un campo di input disponibile per la larghezza disponibile con icone di input-input in Twitter bootstrap 2.3.2 con layout reattivo?

c'è uno stile css in bootstrap input-block-level witch funziona bene fino a quando non anteponi il tuo input con un'icona ... Come ottenere la stessa funzionalità con l'input di Prependet?

<div class="control-group"> 
    <label class="control-label" for="inputIcon">Email address</label> 
    <div class="controls"> 
    <div class="input-prepend "> 
     <span class="add-on"><i class="icon-envelope"></i></span> 
     <input class="span2" id="inputIcon" type="text" class="input-block-level"> 
    </div> 
    </div> 
</div> 
<div class="control-group"> 
    <label class="control-label" for="inputPassword">Password</label> 
    <div class="controls"> 
     <input type="password" id="inputPassword" placeholder="Password" class="input-block-level"> 
    </div> 
</div> 

qui è esempio di codice che illustra questo problema: http://jsfiddle.net/r3CyL/

Answer 1

È necessario aggiungere un piccolo extra CSS

DEMO jsFiddle

.input-prepend.input-block-level { 
    display: table; 
} 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
} 
.input-prepend.input-block-level > input { 
    width: 100%; 
} 

Si potrebbe aggiungere border colore al input-prepend.input-block-level .add-on { per migliorarne l'aspetto.

input-prepend.input-block-level .add-on { 
    display: table-cell; 
    border-right: #fff; 
} 

a cura

Un altro modo più coinvolti di farlo. Questo è anche Bootstrap approvato.

DEMO jsFiddle

.input-append.input-block-level, 
.input-prepend.input-block-level { 
    display: table; 
} 

.input-append.input-block-level .add-on, 
.input-prepend.input-block-level .add-on { 
    display: table-cell; 
    width: 1%; /* remove this if you want default bootstrap button width */ 
} 

.input-append.input-block-level > input, 
.input-prepend.input-block-level > input { 
    box-sizing: border-box; /* use bootstrap mixin or include vendor variants */ 
    display: table; /* table-cell is not working well in Chrome for small widths */ 
    min-height: inherit; 
    width: 100%; 
} 

.input-append.input-block-level > input { 
    border-right: 0; 
} 

.input-prepend.input-block-level > input { 
    border-left: 0; 
}