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>
答案 0 :(得分: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>
答案 1 :(得分:0)
将类pull-left
添加到twitter bootstrap中的glyphicon。
或者添加浮动:左;到glyphicon类
答案 2 :(得分:0)
glyphicon
有一个css
属性right:0
,这就是浮动right
的原因。添加left:0
以使其浮动left
.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;
答案 3 :(得分:0)
的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>