forms - twitter bootstrap 块级表单

Question

我正在尝试获取全宽登录表单。基本上，用户名、密码和按钮的输入字段都应该具有相同的长度。现在我可以很容易地使用 spans 得到这个，问题是当我在用户名和密码前添加一个图标时，输入字段超出 spans（如果我将 input-block-level 应用于输入）并且按钮 spans只是外部跨度变短（如果我尝试 btn-block）。如何让所有元素仅拉伸到包含的跨度宽度？

这是我的小提琴。

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

Answer 1

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

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

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