有图标时输入宽度不同

Question

我正在尝试使用twitter bootstrap构建一个表单，并使用.input-block-level类使输入字段的宽度最大化。

这在以下示例中效果很好，取自官方网站。

• http://pastebin.com/Hi5nTDQq

但是，如果我从官方网站上获取图标示例，并在输入元素上使用.input-block-level类，则它不起作用。

• http://pastebin.com/2KMbyDxT

如果我将.input-block-level类应用于 input-prepend 和 input ，它会变宽但比想要的宽一点。

• http://pastebin.com/uQd3QcBm

我在这里做错了什么？

Answer 1

你没有做错任何事。你拥有的额外空间是因为图标。我想你需要手动进行调整。

Answer 2

一个有趣的问题，这是迄今为止我能想到的最好的两种解决方案：
http://jsfiddle.net/panchroma/jckTk/

密码字段前面都有空白。一个使用默认背景和边框，另一个使用一些简单的CSS删除背景和右边框。

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

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

祝你好运！