Twitter bootstrap 在Twitter Bootstrap 2.3.2中使用带有输入前置的输入块级别
我想知道如何在twitter bootstrap 2.3.2中使用响应式布局,使用输入前置图标填充可用宽度的输入字段 在bootstrap输入块级别中有一个css样式开关工作正常,直到您在输入前添加一个图标。。。如何获得与Prepenet输入相同的功能Twitter bootstrap 在Twitter Bootstrap 2.3.2中使用带有输入前置的输入块级别,twitter-bootstrap,twitter-bootstrap-2,Twitter Bootstrap,Twitter Bootstrap 2,我想知道如何在twitter bootstrap 2.3.2中使用响应式布局,使用输入前置图标填充可用宽度的输入字段 在bootstrap输入块级别中有一个css样式开关工作正常,直到您在输入前添加一个图标。。。如何获得与Prepenet输入相同的功能 <div class="control-group"> <label class="control-label" for="inputIcon">Email address</label> <di
<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>
电子邮件地址
密码
下面是说明此问题的代码示例:您需要添加一点额外的CSS 演示
.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%;
}
.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;
}
您可以将边框
颜色添加到input-prepend.input-block-level.add-on{
以改善其外观
input-prepend.input-block-level .add-on {
display: table-cell;
border-right: #fff;
}
已编辑
另一种更为复杂的方法。这也是一种经过批准的引导方法
演示
.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%;
}
.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;
}
我查看了你的小提琴并修复了你的问题。它现在可以工作了。对我来说不正常。图标的位置不正确。将它们包装在div/span/where中,并将类加载项提供给包装器,为我解决了这个问题: