twitter-bootstrap 将带有输入组类的可点击图标添加到文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31024848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add clickable icon with input-group class to textbox
提问by Anirudh
I have created a Textbox and a submit button with the help of input-groupin Bootstrap:
我input-group在 Bootstrap的帮助下创建了一个文本框和一个提交按钮：
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
I want to add an icon for geolocation in the textbox which is clickable, I tried to do many things like adding another span with input-group-addonbut that's creating a button kind of thing. I want the icon to be inside the textbox and make it clickable. Can anybody suggest a way to do it?
我想在文本框中添加一个可点击的地理定位图标，我尝试做很多事情，比如添加另一个跨度，input-group-addon但这正在创建一个按钮类的东西。我希望图标位于文本框内并使其可点击。有人可以建议一种方法吗？
回答by Guruprasad Rao
Add an anchorset it a class of glyphiconand then make its position:absolutelike one below:
添加一个anchorset it a class ofglyphicon然后使它position:absolute像下面这样：
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" class="glyphicon glyphicon-map-marker"></a>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
CSS
CSS
.glyphicon-map-marker{
position:absolute;
z-index:1000;
top:30%;
left:2%;
}
a.glyphicon-map-marker
{
text-decoration: none !important;
}
回答by AngularJR
Anirudh, Hi there, You could probably try something like this withoutall the extra css.
Anirudh，您好，您可以尝试这样的事情，而无需所有额外的css。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<a href="#" onclick="alert('clicked');" ></a>
<div class="input-group-addon glyphicon glyphicon-map-marker btn"></div>
<input type="text" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>回答by Thomas David Kehoe
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2"></div>
<form ng-submit="search(searchterm)">
<div class="form-group">
<div class="input-group input-group-lg col-sm-8 col-md-8 col-lg-8 col-centered">
<input type="text" class="form-control" ng-model="searchterm">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</form>
<div class="col-sm-2 col-md-2 col-lg-2"></div>
</div> <!-- end row -->
My client wanted a search box with a clickable search glyphicon on the right, and the search box centered in the window, the search box bigger than normal (input-group-lg), with responsive views. I was a miserable wretch until I saw AngularJR's answer. :-)
我的客户想要一个右侧带有可点击搜索字形图标的搜索框，搜索框位于窗口中央，搜索框比普通搜索框 ( input-group-lg) 大，并带有响应式视图。在我看到 AngularJR 的回答之前，我是一个可怜的人。:-)
回答by Sam
.input-group abbr{
font-size: 23px;
position: absolute;
right: 16%;
top: 6px;
z-index: 500;
}
<div class="form-group">
<div class="input-group input-group-lg col-lg-6 col-centered">
<input type="text" class="form-control">enter code here
<abbr><a href="#"><i class="fa fa-map-marker"></i></a></abbr>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
Search
</button>
</span>
</div>
</div>
