Question

有没有办法在<asp:TextBox>控件中显示Glyphicon？

我试过了：

<div class="col-md-10 has-feedback">
    <asp:TextBox runat="server" ID="txtFullName" CssClass="form-control" MaxLength="50" />
     <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

但是它对齐得很远而不是在文本框内......这可能吗？谢谢！

更新：这有效：

<div class="col-md-10 input-group input-group-lg">
<span class="input-group-addon">
  <span class="glyphicon glyphicon-envelope"></span>
</span>
<asp:TextBox runat="server" ID="Email" CssClass="form-control" TextMode="Email" />
</div>

Answer 1

这是Web表单。

 <div class="col-md-4">
  <asp:Label ID="lblArrival" runat="server" Text="Arrival"></asp:Label>
   <div class="input-group date txtDate">
    <asp:TextBox ID="txtArrival" runat="server" CssClass="form-control" style="width:100%"></asp:TextBox>
     <span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
   </div>
  </div>

这是我在使用日历时所做的。可能使用span标记以及input-group-addon。

此外，这也会建议你。 https://v4-alpha.getbootstrap.com/components/input-group/

Answer 2

以下内容将为文本框提供邻近字形，但字形不会与输入的文本重叠。

<强> HTML

 <div class="form-group">
        <div class="input-group glyph-group">
            <div class="input-group-addon"><i class="glyphicon glyphicon-user form-control-feedback"></i></div>
            <asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" MaxLength="50" />
        </div>
    </div>

<强> CSS

.glyph-group div{
        background-color: rgba(0,0,0,0);
        position: relative;
        left: 1px;
    }  

.glyph-group input{
        border-left-color: #fff;
    }

或者，这将为您提供一个文本框，其中包含文本框中的内联字形（请注意，输入的文本与字形重叠，因此我给它一个半透明的颜色。）

<强> HTML

<div class="form-group"> <div class="input-group"> <i class="glyphicon glyphicon-user form-control-feedback glyph-inline"></i> <asp:TextBox runat="server" ID="TextBox2" CssClass="form-control" MaxLength="50" /> </div> </div>

<强> CSS

.glyph-inline { position: absolute; padding: 9px 12px; font-size: 14px; color: rgba(2, 2, 2, 0.21); font-weight: normal; line-height: 1; border-radius: 4px; }

如何在ASP.Net Webforms中的asp：TextBox中放置Bootstrap Glyphicon？

2 个答案: