twitter bootstrap块级别表单

Question

我想获得全宽度登录表单.基本上,用户名,密码和按钮的输入字段都应该具有相同的长度.现在我可以轻松地使用跨度来解决这个问题,问题是当我在用户名和密码上有"前置"图标时,输入字段超出了跨度(如果我将输入块级别应用于输入)并且按钮跨越只有外跨度很短(如果我尝试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)在输入上使用宽度:90.666%.