使用bootstrap将搜索图标放在文本框附近

Question

我在默认文本框中使用bootstrap占据列的全宽,我想将搜索图标放在文本框的末尾.

我的代码是这样的:

<div class="container">
    <div class="row">
        <div class="form-group col-lg-4">
            <label class="control-label">Name</label>
            <input id="txtName" class="form-control input-sm" />
            <span class="glyphicon glyphicon-search"></span> 
        </div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
    </div>
</div>

我不想使用输入组.

请用css建议替代方法或备用html.

Answer 1

以下是三种不同的方法:

这是一个在三个小提琴中的工作演示

验证:

您可以使用本机引导验证状态(无自定义CSS!):

<div class="form-group has-feedback">
    <label class="control-label" for="inputSuccess2">Name</label>
    <input type="text" class="form-control" id="inputSuccess2"/>
    <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

有关完整的讨论,请参阅我的回答添加Bootstrap Glyphicon到输入框

输入组:

你可以使用这样的.input-group类:

<div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

有关完整讨论,请参阅我将Twitter Bootstrap图标添加到输入框的答案

无格式输入组:

您仍然可以使用.input-group定位但只是覆盖默认样式以使两个元素分开显示.

使用普通输入组但添加类input-group-unstyled:

<div class="input-group input-group-unstyled">
    <input type="text" class="form-control" />
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

然后使用以下css更改样式:

.input-group.input-group-unstyled input.form-control {
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
    border-radius: 4px;
    border: 0px;
    background-color: transparent;
}

此外,这些解决方案适用于任何输入大小