Sử dụng input-block-level với input-prepend trong Twitter Bootstrap 2.3.2

Question

Tôi tự hỏi làm thế nào để làm cho một trường đầu vào điền chiều rộng có sẵn với các biểu tượng đầu vào-prepend trong twitter bootstrap 2.3.2 với bố trí đáp ứng?

có kiểu css trong bootstrap khối đầu vào mức phù thủy hoạt động tốt cho đến khi bạn thêm đầu vào của mình bằng biểu tượng ... Làm cách nào để có cùng chức năng với đầu vào đầu vào?

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

đây là ví dụ về mã minh họa vấn đề này: http://jsfiddle.net/r3CyL/

Answer 1

Bạn cần phải bổ sung thêm một chút 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%; 
} 

Bạn có thể thêm border màu input-prepend.input-block-level .add-on { để cải thiện diện mạo của nó.

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

EDITED

Một cách khác để tham gia nhiều hơn để làm việc đó. Đây cũng là Bootstrap aproved.

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