Question

This is output i am getting but i need glyphicon at left side在此代码中，我在glyphicon框的右侧收到input，如何在左侧显示glyphicon。

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">

          <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
          <i class="glyphicon glyphicon-lock form-control-feedback"></i>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

没有额外的自定义CSS。使用bootstrap CSS的解决方案

  <div class="panel-body">
 <div class="row">
<div class="col-lg-12">
  <form id="signin-form" action="" method="post" role="form" style="display: block;">
    <div class="form-group ">
      <div class="input-group">
        <span class="input-group-addon" id="basic-addon1"> <i class="glyphicon glyphicon-user"></i></span>
        <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
      </div>
    </div>
  </form>
</div>

Answer 2

将类pull-left添加到twitter bootstrap中的glyphicon。或者添加浮动：左;到glyphicon类

Answer 3

glyphicon有一个css属性right:0，这就是浮动right的原因。添加left:0以使其浮动left

＆＃13;

.form-group i.glyphicon {
  left: 13px; /*Added left 10px to align it to `textbox`*/
}
input[type="text"] {
  padding-left: 25px; /*let the text inside textbox start bit away from icon*/
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">
          <i class="glyphicon glyphicon-user form-control-feedback"></i>
          <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
        </div>
      </form>
    </div>
  </div>
</div>

＆＃13;

Answer 4

的style.css：

.inner-addon {
  position: relative;
}

/* style glyph */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align glyph */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

HTML代码：

<div class="panel-body">
  <div class="row">
    <div class="col-lg-12">
      <form id="signin-form" action="" method="post" role="form" style="display: block;">
        <div class="form-group ">
           <div class="inner-addon left-addon">
      <i class="glyphicon glyphicon-lock"></i>      
      <input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
    </div>
        </div>
      </form>
    </div>
  </div>
</div>

如何在文本框的左侧使用glyphicon

4 个答案: