我想知道如何使用响应式布局的 twitter bootstrap 2.3.2 中的输入前置图标使输入字段填充可用宽度?
bootstrap 中有一个 CSS 样式 输入 block 级 女巫工作正常,直到您在输入前添加一个图标...如何使用前置输入获得相同的功能?
<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>
这是说明此问题的代码示例:http://jsfiddle.net/r3CyL/
最佳答案
你需要添加一些额外的 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%;
}
您可以添加
border
颜色到input-prepend.input-block-level .add-on {
来改善它的外观。input-prepend.input-block-level .add-on {
display: table-cell;
border-right: #fff;
}
已编辑
另一种更复杂的方式。这也是 Bootstrap 认可的。
演示 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;
}
关于twitter-bootstrap - 在 Twitter Bootstrap 2.3.2 中使用 input-block-level 和 input-prepend,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18417998/