大佬教程收集整理的这篇文章主要介绍了css – 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来改变这个？
.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>
以上是大佬教程为你收集整理的css – Twitter Bootstrap输入不满足容器的全宽全部内容，希望文章能够帮你解决css – Twitter Bootstrap输入不满足容器的全宽所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。