html - 使用 input-groups bootstrap 创建一个内联表单

Question

我正在尝试使用输入组创建一个简单的内联表单，以在输入前显示图标。据我所知，我正在关注文档，但表单没有按预期显示。 See this JSFiddle , 说明了问题。我假设 it should be displayed like this (当然只有前面有图标)。如何解决？

我的代码:

<form class="form-inline" role="form">
    <div class="form-group">    
        <div class="input-group">                       
            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
            <input type="email" class="form-control" placeholder="Enter email"/>
        </div>
    </div>

    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
            <input type="password" class="form-control" placeholder="Choose password"/>
        </div>
    </div>                          

    <button type="submit" class="btn btn-default">Create account</button>
</form>

Answer 1

这是已知问题，将根据 this ship list 在 Bootstrap v.3.2.0 中修复.

在此之前你可以自己修复它:

.input-group {
    display: inline-table;
    vertical-align: middle;

    .input-group-addon,
    .input-group-btn,
    .form-control {
        width: auto !important;
    }
}