表单 – twitter bootstrap块级表单

概述我想获得全宽度登录表单.基本上,用户名,密码和按钮的输入字段都应该具有相同的长度.现在我可以轻松地使用跨度来解决这个问题,问题是当我在用户名和密码上有“前置”图标时,输入字段超出了跨度(如果我将输入块级别应用于输入)并且按钮跨度只有外跨度很短(如果我尝试btn-block).如何让所有元素仅延伸到包含的跨度宽度？ 这是我的小提琴. http://jsfiddle.net/sujesharukil/ 我想获得全宽度登录表单.基本上,用户名,密码和按钮的输入字段都应该具有相同的长度.现在我可以轻松地使用跨度来解决这个问题,问题是当我在用户名和密码上有“前置”图标时,输入字段超出了跨度(如果我将输入块级别应用于输入)并且按钮跨度只有外跨度很短(如果我尝试btn-block).如何让所有元素仅延伸到包含的跨度宽度？

这是我的小提琴.

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

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

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

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

总结

以上是内存溢出为你收集整理的表单 – twitter bootstrap块级表单全部内容，希望文章能够帮你解决表单 – twitter bootstrap块级表单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。