没有引导程序： 我们将稍后介绍Bootstrap，但这是基本的CSS概念，您可以自己做。正如猎物所指出的那样，您可以通过将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; }
: This presumes you’re using glyphicons, but works equally well with font-awesome. For FA, just replace .glyphicon with .fa
使用Bootstrap：
正如缓冲区指出的那样，这可以通过在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设置以及实时演示。
frizi’ssuggestionof adding pointer-events: none; has been added tobootstrap
602392714
清零编程群