我有一个基于 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>
使用此代码时,表单如下截图所示:
但是,当我调整浏览器大小时模拟较小的屏幕时,带有 add-on
前缀的字段的宽度大小不正确,如下所示:
问题
- 此表单是否有不同的编码方式,以便输入字段和图标 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 中像这样使用它并记住,在这种情况下,您必须使用 a
标签而不是 button
作为您的按钮:
<div class="input-append input-block-level">
<input type="text" />
<a class="btn add-on">click</a>
</div>
关于css - Twitter Bootstrap 输入附加不是容器的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14126703/