Question

我无法显示双图标引导程序v3.1.1。当我使用旧版本的bootstrap与类“icon-user”时它的工作但不是用于glyphicon icon bootstrap 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>

css for style

 .left-inner-addon {
  position: relative;
  }

.left-inner-addon input {
  padding-left: 30px;    
 }

 .left-inner-addon i {
  position: absolute;
  padding: 10px 12px;
  pointer-events: none;
  }

 .right-inner-addon {
   position: relative;
 }

 .right-inner-addon input {
  padding-right: 30px;    
 }

 .right-inner-addon i {
  position: absolute;
  right: 0px;
  padding: 10px 12px;
  pointer-events: none;
}

.btn-primary
{
 width:100%;
}

jsfiddle上的代码http://jsfiddle.net/cyCFS/426/

Answer 1

问题是两个甘油酮都适用于相同的第一个输入。你可以通过简单地使用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>

工作小提琴：http://jsfiddle.net/cyCFS/428/

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

1 个答案: