我想知道如何使用twitter bootstrap 2.3.2中的输入前置图标和响应式布局来使输入字段填充可用宽度?
在bootstrap中有一个css样式输入块级别的巫婆工作正常,直到你用一个图标添加你的输入…如何获得与prependet输入相同的功能?
<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
DEMO 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%; }
您可以将边框颜色添加到input-prepend.input-block-level .add-on {以改善它的外观.
input-prepend.input-block-level .add-on { display: table-cell; border-right: #fff; }
EDITED
另一种更为参与的方式.这也是Bootstrap的批准.
DEMO 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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。