使用引导程序将搜索图标放在文本框附近 [英] Put search icon near textbox using bootstrap

问题描述

默认情况下，我使用引导程序占据列的全宽，我想将搜索图标放在文本框的末尾.

我的代码是这样的:

<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 class="col-lg-4"></div><div class="col-lg-4"></div>

我不想使用输入组.

请建议另一种方式或使用 css 替代 html.

解决方案

以下是三种不同的方法:

这是所有三个 Fiddle 中的一个工作演示

验证:

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

<label class="control-label";for=inputSuccess2">名称</label><输入类型=文本"类=表单控制"id="inputSuccess2"/><span class="glyphicon glyphicon-search form-control-feedback"</span>

有关完整讨论，请参阅我对向输入框添加 Bootstrap Glyphicon

的回答

输入组:

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

<输入类型=文本"class =表单控件"/><span class="input-group-addon"><i class="fa fa-search"></i></span>

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

无样式输入组:

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

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

<输入类型=文本"类=表单控制"/><span class="input-group-addon"><i class="fa fa-search"></i></span>

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

.input-group.input-group-unstyled input.form-control {-webkit-border-radius: 4px;-moz-border-radius: 4px;边框半径:4px；}.input-group-unstyled .input-group-addon {边框半径:4px；边框:0px；背景色:透明；}

---

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

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.

My code is like this:

<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>

I don't want to use input group.

Please suggest an alternate way or alternate html with css.

解决方案

Here are three different ways to do it:

Here's a working Demo in Fiddle Of All Three

Validation:

You can use native bootstrap validation states (No Custom 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>

For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box

Input Group:

You can use the .input-group class like this:

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

For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box

Unstyled Input Group:

You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.

Use a normal input group but add the class 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>

Then change the styling with the following 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;
}

---

Also, these solutions work for any input size

这篇关于使用引导程序将搜索图标放在文本框附近的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！