html - Input width differs when there's an icon

Question

I'm trying to build a form using twitter bootstrap and having the input fields' width maximized by using the .input-block-level class.

This works well in this example below, taken from the official site.

• http://pastebin.com/Hi5nTDQq

However, if I take the icon example, also from the official site, and use the .input-block-level class on the input element, it doesn't work.

• http://pastebin.com/2KMbyDxT

If I apply the .input-block-level class to both input-prepend and input, it gets wide but a little bit wider than desired.

• http://pastebin.com/uQd3QcBm

What am I doing wrong here?

Answer 1

あなたは何も悪いことをしていません。あなたが持っている余分なスペースはアイコンのためです。手動で調整する必要があると思います。

Answer 2

興味深い質問です。これまでに考えられる最良の 2 つのソリューションを次に示します:
http://jsfiddle.net/panchroma/jckTk/

どちらも、パスワード フィールドの前に空白があります。1 つはデフォルトの背景と境界線を使用し、もう 1 つは簡単な CSS で背景と右側の境界線を削除します。

.passwordAddon{
background-color:inherit !important;
border-right:none !important;
}

.password-With-Prepend{
border-left:none !important;
}

幸運を！