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

FIDDLE

您需要使用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>

将glyphicons图标对齐到文本输入框的右侧和内侧

1 个答案: