在文字輸入框的右側和內部對齊字形圖標

Question

我正在嘗試將glyphicon-info-sign圖標添加到使用bootstrap css創建的密碼輸入框中。 我試圖使圖標出現在密碼文本框內和右側。 我嘗試了各種組合，但是圖標出現在輸入框的底部。
這是jsfiddle示例https://jsfiddle.net/bsbef0qd/ 。 謝謝。

<div class="row">
  <div class="form-group add-on col-xs-4">
    <label for="password" class="control-label">Password</label>
    <input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" />
    <span class="input-group-addon">
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions"> 
        <i class='glyphicon glyphicon-info-sign'></i>
      </a>
    </span>
  </div>
  <div class="form-group col-xs-4">
    <label for="confirm" class="control-label">Confirm Password</label>
    <input type="password" name="confirm" value="" class="form-control input-sm" />
  </div>
</div>  

Answer 1

小提琴

您需要使用input-group並將label帶到外面。

<div class="row">
  <div class="col-xs-4">
    <label for="password" class="control-label">Password</label>
    <div class="input-group add-on">
      <input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" />
      <span class="input-group-addon">
      <a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions"> 
        <i class='glyphicon glyphicon-info-sign'></i>
      </a>
    </span>
    </div>
  </div>