将字形图标与右侧和文本输入框内对齐

Align glyphicons icon to right and inside text input box

本文关键字：输入 文本 对齐 字形 图标      更新时间：2023-09-26

我正在尝试将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>

小提琴

您需要使用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>
相关文章：