gpt4 book ai didi

css - 推特 Bootstrap 输入前置全宽

转载 作者:技术小花猫 更新时间:2023-10-29 12:03:22 26 4
gpt4 key购买 nike

目前正在使用bootstrap-2.1.1

我有一个包含 2 列的 row-fluid,在这些列中我有输入前缀。这是一个示例代码:

<div class="row-fluid">
<div class="span6">
<ul>
<li>
<div class="input-prepend box-shadow">
<span class="add-on">email</span>
<input type="text" name="email" value="" placeholder="Edit email"/>
</div>
</li>
</ul>
</div>
<div class="span6">
<ul>
<li>
<div class="input-prepend box-shadow">
<span class="add-on">name</span>
<input type="text" name="name" value="" placeholder="Edit name"/>
</div>
</li>

</ul>
</div>
</div>

您可以在此处查看 JSBIN:http://jsbin.com/unuruh/1/

问题

如何使用 preferable only CSS 使父 input-prepend 的输入字段全宽(并随浏览器调整大小)?请记住,add-on 应该具有相同的宽度...

预先感谢您的帮助。

最佳答案

流体跨度

这是一种方法:Demo (jsbin)

<li>
<div class="row-fluid">
<div class="input-prepend box-shadow clearfix" style="border-radius: 3px;">
<span class="add-on span2" style="width: 14.2%;float: left;">email</span>
<input class="span1" style="width: 85.8%;float: left;border-right: 0;border-tradius: 0;border-bottom-right-radius: 0;" type="text" name="#" value="#hello" placeholder="Edit project"/>
</div>
</div>
</li>

widthfloat 是用来覆盖响应行为对 span 所做的,其余的内联样式是让盒子更漂亮一点。

有一个类似的问题,没有所有包装问题:Fluid input-append in Bootstrap Responsive


绝对定位

更新 2.3 版:你需要 .input-fullwidth { display: block; }Updated Demo (jsfiddle)

另一种方法是使用绝对定位:Demo (jsfiddle)

.input-prepend.input-fullwidth {
position: relative;
}
.input-prepend.input-fullwidth .add-on {
width: 40px;
}
.input-prepend.input-fullwidth .input-wrapper {
position: absolute;
display: block;
left: 51px; /* 40 + 2*5 - 1 */
right: 0;
top: 0;
bottom: 0;
}
.input-prepend.input-fullwidth .input-wrapper input {
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="input-prepend input-fullwidth">
<span class="add-on">email</span>
<div class="input-wrapper"><input type="text" name="#" value="#hello" placeholder="Edit project"/></div>
</div>

最终,您可能正在寻找 flexbox feature of CSS3 (w3.org)

关于css - 推特 Bootstrap 输入前置全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12995993/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com