我在Twitter Bootstrap上建立了一个网站.
当构建2列表单时,我尝试使用input-prepend类在窗体输入的左侧添加一个电子邮件图标.我希望输入字段和前置图标始终为容器的100％.
这是我的代码：
<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>
当使用这个代码时,窗体看起来像这个截图：
但是当我调整浏览器的大小来模拟一个较小的屏幕时,附加前缀的字段的宽度大小不正确,如下所示：
题
>这种形式应该有不同的方式被编码,以便输入字段&图标是100％,并匹配其他字段？
>或者我需要在Bootstrap中更改什么CSS来改变这个？
解决方法
Bootstrap 3还没有出来,所以这里是我的简单和工作的解决方案,用于追加和预处理.在Bootstrap中包含CSS / 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;
}
在HTML中使用它,请记住,在这种情况下,您必须使用标签不是按钮的按钮：
<div class="input-append input-block-level"> <input type="text" /> <a class="btn add-on">click</a> </div>
