Giriş-blok düzeyi ile Twitter'da giriş-çıkış düzeyini kullanma Bootstrap 2.3.2

Question

Giriş tepkisi simgelerinin giriş genişlemeli simgelere sahip giriş alanı doluluk ikonları 2.3.2 duyarlı düzende nasıl girileceğini merak ediyorum?

Bootstrap'te bir css stili var giriş bloğu düzeyi Cadı, bir simge ile girişinizi hazırlayana kadar gayet iyi çalışıyor ... Prependet girişle aynı işlevsellik nasıl elde edilir? Sen hiç border renk katmak olabilir Sen

demo fazladan CSS 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%; 
} 

eklemem gerekiyor http://jsfiddle.net/r3CyL/

Answer 1

: Burada

<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> 

bu sorunu gösteren kod örneği Görünümü iyileştirmek için input-prepend.input-block-level .add-on {.

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

bunu yapmanın başka daha karmaşık bir yol

DÜZENLENMİŞ. Bu ayrıca Bootstrap onaylandı.

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; 
}