Twitter bootstrap Bootstrap v3.1.1上带有图标的表单

Twitter bootstrap Bootstrap v3.1.1上带有图标的表单,twitter-bootstrap,icons,Twitter Bootstrap,Icons,我无法显示双图标引导v3.1.1。当我将旧版本引导程序与类icon user一起使用时,它可以工作,但不适用于glyphicon icon引导程序v3.1.1 <div class="col-xs-6" > <div class="left-inner-addon"> <i class="glyphicon glyphicon-user"></i> <input type="text" class="fo

我无法显示双图标引导v3.1.1。当我将旧版本引导程序与类icon user一起使用时,它可以工作,但不适用于glyphicon icon引导程序v3.1.1

<div class="col-xs-6" >
<div class="left-inner-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text"
           class="form-control" 
           placeholder="Username" />
    <br>
    <i class="glyphicon glyphicon-book"></i>
    <input type="text"
           class="form-control" 
           placeholder="password" />
    <br>    
    <input class="btn btn-success" type="submit" value="Submit">
</div>

JSFIDLE上的代码

问题是两个glyicons应用于相同的第一个输入。您只需使用2个div即可解决此问题

<div class="left-inner-addon">
    <i class="glyphicon glyphicon-user"></i>
        <input type="text"
            class="form-control" 
            placeholder="Username" />
</div>
<div class="left-inner-addon">
     <i class="glyphicon glyphicon-book"></i>
        <input type="text"
            class="form-control" 
            placeholder="password" />
        <br>    
        <input class="btn btn-success" type="submit" value="Submit">

 </div>
工作小提琴:

<div class="left-inner-addon">
    <i class="glyphicon glyphicon-user"></i>
        <input type="text"
            class="form-control" 
            placeholder="Username" />
</div>
<div class="left-inner-addon">
     <i class="glyphicon glyphicon-book"></i>
        <input type="text"
            class="form-control" 
            placeholder="password" />
        <br>    
        <input class="btn btn-success" type="submit" value="Submit">

 </div>