在一次布局前端登錄界面時，引入bootstrap自帶圖標，怎么都對不齊。查看文檔 發現有兩種實現模式，一種是圖標位置默認自動放到input 右側部分，如圖
實現方式如下：
<div class="form-group has-feedback">
<div class="col-md-6">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
<input type="text" class="form-control" id="username" name="username" placeholder="用戶名" autofocus>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-md-6">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="密碼">
</div>
</div>
但是想要的結果是圖標放到左邊，但是又不想調整bootstrap原css部分，所以查看bootstrap文檔https://v3.bootcss.com/components/#input-groups發現有另一種模式，如圖：
案例正常，但在加入自帶圖標時發現左側圖標部分和右側文本框線完全對不齊，上下邊框線差1ps，原來寫法是這樣寫的：
1 <div class="input-group"> 2 <span class="input-group-addon glyphicon glyphicon-user" aria-hidden="true"> 3 </span> 4 <input type="text" id="user-name" class="form-control" maxlength="50" placeholder="用戶名" autofocus> 5 </div>
經過查找原因，把span元素改成嵌套元素，解決問題。 代碼和效果如下所示：
<div class="input-group"> <span class="input-group-addon" aria-hidden="true"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" id="user-name" class="form-control" maxlength="50" placeholder="用戶名" autofocus> </div> <div class="input-group"> <span class="input-group-addon" aria-hidden="true"> <span class="glyphicon glyphicon-lock"></span> </span> <input type="password" id="password" class="form-control" maxlength="50" placeholder="密碼"> </div> <div class="form-group"> <button class="btn btn-lg btn-primary btn-block" id="submit" style="background: #0072bf">登錄</button>
</div>
前端html設計一種寫法很可能就是一種顯像模式，只有多嘗試，多試驗才能做到得心應手，對於常做后台的編碼人員來說，多學學前端樣式和腳本，並不見得是件壞事。