没有引导程序：

我们稍后会介绍 Bootstrap，但这里有一些基本的 CSS 概念，以便您自己完成。正如指出的那样，您可以通过将图标绝对定位在输入元素内来使用 CSS来做到这一点。然后在任一侧添加填充，使文本不与图标重叠。

因此对于以下 HTML：

<div class=" **inner-addon left-addon** ">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

您可以使用以下 CSS 左右对齐字形：

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Plunker 中的演示

注意 ：这假定您正在使用glyphicons，但与font-
awesome一样好用。
对于 FA，只需替换.glyphicon为.fa

使用引导程序：

正如缓冲区所指出的，这可以通过使用带有可选图标的验证 状态在
Bootstrap 中本地完成。这是通过给.form-group元素的类.has-feedback和图标的类来完成的.form-control-feedback。

最简单的例子是这样的：

<div class="form-group **has-feedback** ">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user **form-control-feedback** "></i>
</div>

优点 ：

• 包括对不同表单类型（基本、水平、内联）的支持
• 包括对不同控件大小的支持（默认、小、大）

缺点 ：

• 不包括对 左 对齐图标的支持

为了克服这些缺点，我将这个拉取请求与支持左对齐图标的更改放在一起。由于是比较大的改动，所以一直推迟到以后的版本发布，但是如果你
今天 需要这些功能，这里有一个简单的实现指南：

只需将 这些表单更改包含在 css
中
（也通过底部的隐藏堆栈片段内联）
*LESS ：或者，如果您通过 less 构建，这里的表单更改为
less

然后，您所要做的就是在.has-feedback-left具有该类的任何组中包含该类.has-feedback，以便使图标左对齐。

由于在不同的表单类型、不同的控件大小、不同的图标集和不同的标签可见性上有很多可能的 html 配置，我创建了一个测试页面，显示每个排列的正确 HTML
集以及现场演示。

这是 Plunker 中的演示

PS frizi
的添加建议pointer- events: none;已添加到 bootstrap

为左对齐反馈图标添加 CSS

.has-feedback .form-control {

  padding-right: 34px;

}

.has-feedback .form-control.input-sm,

.has-feedback.form-group-sm .form-control {

  padding-right: 30px;

}

.has-feedback .form-control.input-lg,

.has-feedback.form-group-lg .form-control {

  padding-right: 46px;

}

.has-feedback-left .form-control {

  padding-right: 12px;

  padding-left: 34px;

}

.has-feedback-left .form-control.input-sm,

.has-feedback-left.form-group-sm .form-control {

  padding-left: 30px;

}

.has-feedback-left .form-control.input-lg,

.has-feedback-left.form-group-lg .form-control {

  padding-left: 46px;

}

.has-feedback-left .form-control-feedback {

  left: 0;

}

.form-control-feedback {

  line-height: 34px !important;

}

.input-sm + .form-control-feedback,

.form-horizontal .form-group-sm .form-control-feedback {

  width: 30px;

  height: 30px;

  line-height: 30px !important;

}

.input-lg + .form-control-feedback,

.form-horizontal .form-group-lg .form-control-feedback {

  width: 46px;

  height: 46px;

  line-height: 46px !important;

}

.has-feedback label.sr-only ~ .form-control-feedback,

.has-feedback label.sr-only ~ div .form-control-feedback {

  top: 0;

}

@media (min-width: 768px) {

  .form-inline .inline-feedback {

    position: relative;

    display: inline-block;

  }

  .form-inline .has-feedback .form-control-feedback {

    top: 0;

  }

}

.form-horizontal .has-feedback-left .form-control-feedback {

  left: 15px;

}