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

Question

我正在尝试使用输入组创建一个简单的内联表单,以在输入之前显示图标.据我所知,我正在关注文档,但表单没有按预期显示.看到这个JSFiddle,它演示了这个问题.我认为它应该像这样显示(当然只有前面的图标).怎么解决这个问题？

我的代码:

<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

这是已知问题,将根据此发货清单在Bootstrap v.3.2.0中修复.

在此之前你可以像这样修理自己:

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

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

Answer 2

我让它像这样工作:

<form class="form-inline" role="form">
<div class="row">
    <div class="form-group col-sm-3">
        <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 col-sm-3">
        <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>
</div>

http://jsfiddle.net/n5qmc/