twitter引导块级别表单

问题描述

我正在尝试获取全宽登录表单。基本上，用户名，密码和按钮的输入字段都应该具有相同的长度。现在我可以很容易地使用跨度，问题在于当我在用户名和密码上添加了一个图标时，输入字段超出了跨度（如果我将输入块级别应用于输入）并且按钮跨度只有到外部短跨度（如果我尝试btn块）。我怎么才能让所有元素伸展到包含跨度宽度？

这是我的小提琴。

解决方案

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

或者使用宽度：90.666％根据固定图标宽度（28px）和宽度跨度（（300-28）/ 300 * 100）。

I am trying to get full width Login form. Basically, the input fields for the user name, password and the button all should be of the same length. now I can get this using spans easily, the trouble is when I have an icon "prepended" to the username and password, the input fields stretch beyond the spans (if I apply input-block-level to the inputs) and the button spans only to the outer span coming up short (if I try btn-block). How do I get all the elements to stretch only up to the containing span width?

Here is my fiddle.

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

解决方案

You can use display: table and display: table-cell to get the inputs to fill the remaining space in the spans correctly or use fluid widths. Here's a fiddle for the first approach:

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

Or use width: 90.666% on the inputs based on the fixed icon width (28px) and the width of the spans ((300-28) / 300 * 100).

这篇关于twitter引导块级别表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！