如何在文本框的左侧显示图形

This is output i am getting but i need glyphicon at left side在此代码中我在input框的右侧获得框如何在左侧获得。如何在文本框的左侧显示图形

<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>

来源

2016-06-10 Pradeep Gowda

我看不出有任何'glyphicon'有.. –

Glyphicon是不是有...尝试在小提琴后.. – SESN

没有问题。 @GuruprasadRao – bhansa

无需额外的自定义CSS。自举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>

来源

2016-06-10 09:32:01 Selvam

romba romba nandri selvam plz mail id solungo –

没有道具....你是受欢迎的pradeep ....我希望你可以投我的答案，并接受作为anwser :) – Selvam

在twitter bootstrap中将类pull-left添加到图形。或者添加float：left;到glyphicon类

来源

2016-06-10 06:52:24 SESN

有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*/ 
 
}

<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>

来源

2016-06-10 06:55:11

我们可以不用自定义css –

'jquery'宁愿？ –

GuruPrasad rao我需要一些bootstrap的帮助，你可以给你的邮件编号 –

的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>

来源

2016-06-10 07:15:19 bhansa

如何在文本框的左侧显示图形

回答

相关问题