css - Font Awesome 实现到 ASP.NET 文本框服务器控件

Question

http://www.petcenters.com/painting-estimate是一个使用 CssClass 选择器启用 Bootstrap 的 ASP.NET 控件的测试页。

我已尝试按照以下说明的指南将 Font Awesome 类实现到 ASP.NET TextBox 控件中: Bootstrap Documentation

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

我正在使用的 Bootstrap 模板显示了它们的实现:Font Awesome with HTML Form Tags

<section class="col col-6">
   <label class="label">Company</label>
   <label class="input">
      <i class="icon-append fa fa-envelope-o"></i>
      <input type="text" name="company" id="company">
   </label>
</section>

我已尝试使用 ASP.NET 文本框服务器控件的两种方案进行复制。

<div class="input-group col-md-6 clearfix">
   <label for="txtGenCompany">Company</label>
   <asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
    <span class="input-group-addon" id="addon1">
       <i class="icon-append fa fa-envelope-o"></i>
    </span>
</div>

我相信我遗漏了“span”或“i”的内容 Company TextBox

如果有人有任何想法，我将不胜感激。

Answer 1

你需要的是

HTML

<div class="input-group input-group-md">
  <lable>Company</lable>
  <asp:TextBox ID="txtGenCompany" name="company" CssClass="form-control" aria-describedby="addon1" placeholder="Enter Company" runat="server" TabIndex="2"></asp:TextBox>
  <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
</div>

CSS

lable {
 display: table-caption;
 white-space: nowrap;
}

.input-group {
  padding-bottom: 20px;
}

PS: 有太多的视觉指南来获取输入是不好的，这里我们有 3 个:

• 标签
• 占位符
• Font Awesome 图标

如果可以的话尽量减少它们。