Css twitter引导输入前置全宽

目前正在使用bootstrap-2.1.1

我有一个包含两列的

行流体

，在这些列中我有输入前缀。下面是一个示例代码：

<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：

问题

如何使用仅CSS将父

输入前置

的输入字段设置为全宽（并通过浏览器调整大小）？请记住，

附加组件

的宽度应相同

提前感谢您的帮助。

以下是一种方法：

电子邮件

width

和

float

用于覆盖响应行为对

span

s所做的操作，内联样式的其余部分用于使框更漂亮

还有一个类似的问题，没有所有的包装问题：

---

绝对定位 更新版本2.3：您需要

。输入全宽{display:block；}

另一种方法是绝对定位：

.input-prepend.input-fullwidth{
位置：相对位置；
}
.input-prepend.input-fullwidth.add-on{
宽度：40px；
}
.input-prepend.input-fullwidth.input包装器{
位置：绝对位置；
显示：块；
左：51px；/*40+2*5-1*/
右：0；
排名：0；
底部：0；
}
.input-prepend.input-fullwidth.input包装器输入{
宽度：100%；
身高：100%；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}

电子邮件

---

---

最终，你可能在寻找我考虑过的

，但设计师希望

附加组件

是固定宽度的……还有其他想法吗？@denislexic刚刚添加了一个替代方案。如果可以的话，试试Flexbox谢谢，@Sherbrow。你的第二种方法对我来说非常有效。只是想更新它，因为我使用了第二种解决方案，但当我升级到Bootstrap 2.3.1时，它不起作用。要使CSS在Bootstrap 2.3.1中工作，您需要对其进行的唯一更改是添加

display:block到您的
输入全幅
类。就这样！希望这对其他人有帮助。分享知识@Sherbrow你能为输入附加做一个JSFIDLE吗？如果你的问题得到了回答，请标记它！