如何在文本框的左側顯示圖形

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

如何在文本框的左側顯示圖形

回答

相關問題