Đầu vào Bootstrap Twitter Không thêm chiều rộng đầy đủ của vùng chứa

Question

Tôi có một trang web được xây dựng trên Twitter Bootstrap.

Khi xây dựng biểu mẫu 2 cột, tôi đang cố gắng sử dụng lớp input-prepend để thêm biểu tượng email ở bên trái của đầu vào biểu mẫu. Tôi muốn trường nhập cùng với biểu tượng đăng ký luôn là 100% vùng chứa.

Dưới đây là mã của tôi:

     <div class='row-fluid'> 
         <div class='span6'> 
          <div class='control-group' id='contactEmailControlGroup'> 
          <label for='contactEmail'>Email Address</label> 
           <div class='input-prepend'> <span class='add-on'><i class='icon-envelope'></i></span> 
           <input type='email' name='contactEmail' id='contactEmail' class='span11' placeholder='Your email address...' tabindex='3' required/> 
           <span class='help-inline formAlert' id='contactEmailError'> <i class='icon-edit formAlertIcon'></i> Please enter your email address </span> <span class='help-inline formAlert' id='contactEmailInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid email address </span> 
          </div> 
          </div> 
         </div> 
         <div class='span6'> 
          <div class='control-group'> 
          <label for='contactPhone'>Phone Number</label> 
          <input type='tel' name='contactPhone' id='contactPhone' class='span12' placeholder='Your phone number...' tabindex='4' required/> 
          <span class='help-inline formAlert' id='contactPhoneError'> <i class='icon-edit formAlertIcon'></i> Please enter your phone number </span> <span class='help-inline formAlert' id='contactPhoneInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid phone number </span> </div> 
         </div> 
         </div> 

Khi sử dụng mã này, hình thức trông giống như ảnh chụp màn hình này:

Nhưng khi tôi thay đổi kích thước trình duyệt để mô phỏng một màn hình nhỏ hơn, độ rộng của lĩnh vực này với add-on được thêm vào trước có kích thước không chính xác, như được thấy ở đây:

CÂU HỎI

• Có cách nào khác nên định dạng biểu mẫu này sao cho trường nhập & là 100% và khớp với các trường khác?
• Hoặc CSS nào tôi cần thay đổi trong Bootstrap để thay đổi điều này?

Answer 1

Hóa ra đây là một vấn đề được biết đến và sẽ được giải quyết trong phiên bản 3. [SOURCE]

Answer 2

Bootstrap 3 không phải là ra được nêu ra, vì vậy đây là giải pháp đơn giản và làm việc của tôi cho cả hai thêm và các trường hợp thêm vào trước. Bao gồm này sau khi Bootstrap CSS/file LESS:

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

Sử dụng nó như thế này trong HTML của bạn và ghi nhớ, bạn phải sử dụng a thẻ không button cho các nút của bạn trong trường hợp này:

<div class="input-append input-block-level"> 
    <input type="text" /> 
    <a class="btn add-on">click</a> 
</div>