forms - twitter bootstrap block 级表单

Question

我正在尝试获取全宽登录表单。基本上，用户名、密码和按钮的输入字段都应该具有相同的长度。现在我可以使用跨度轻松获得此效果，问题是当我在用户名和密码“前面”添加一个图标时，输入字段超出了跨度(如果我将输入 block 级别应用于输入)并且按钮跨度仅到外部跨度变短(如果我尝试 btn-block)。如何让所有元素仅拉伸(stretch)到包含的跨度宽度？

这是我的 fiddle 。

http://jsfiddle.net/sujesharukil/EP83X/21/

Answer 1

您可以使用 display: table 和 display: table-cell 来获取输入以正确填充跨度中的剩余空间或使用流体宽度。这是第一种方法的 fiddle :

http://jsfiddle.net/EP83X/22/

或者根据固定图标宽度 (28px) 和跨度宽度 ((300-28)/300 * 100) 在输入上使用 width: 90.666%。