使用 Bootstrap 3 在提交按钮内放置图标
[英]Place icon inside submit button using Bootstrap 3
问题描述
I am trying to achieve the effect as shown in below screenshot using Bootstrap 3.
我正在尝试使用 Bootstrap 3 实现如下图所示的效果。
As you can see, the search button is both:如您所见，搜索按钮是：
1) inside the input 1）在输入里面
2) styled with a glyphicon so as to not appear like a "button". 2) 使用字形设计，以免看起来像“按钮”。
How can I achieve a similar effect with Bootstrap 3?如何使用 Bootstrap 3 实现类似的效果？ I would like to place a button with a magnifying glass glyphicon at the end of a text input, however the button keeps appearing below the input as opposed to inside of it.我想在文本输入的末尾放置一个带有放大镜图标的按钮，但是该按钮一直出现在输入下方而不是输入内部。
3 个解决方案
解决方案1
9 已采纳 2014-07-27 21:40:29
A wrapper div with position: relative;一个带有position: relative;的包装 div position: relative; then positioning the submit button on top using position: absolute;然后使用position: absolute;将提交按钮定位在顶部position: absolute; . . Like this:像这样：
http://jsfiddle.net/VtP5k/ http://jsfiddle.net/VtP5k/
HTML HTML
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
CSS CSS
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
解决方案2
4 2014-07-27 21:19:14
Try this.尝试这个。
In bootstrap you have to use button type submit instead of input type;
div { padding: 15px; background: #000; } .btn { text-align: left !important; font-size: 12px !important; padding: 20px 12px !important; width: 200px !important; color: #888 !important; }
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" /> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div> <button type="submit" class="btn btn-default"> awesomeness <span class="glyphicon glyphicon-search pull-right"></span> </button> <div>
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
解决方案3
1 2014-07-27 21:26:33
The problem is because the button is adhering to the normal flow of html and thus appears below the first element.问题是因为按钮遵循正常的 html 流程，因此出现在第一个元素下方。 What you need to do is wrap both the input and search button in an div and then make the search button absolute positioning.您需要做的是将输入和搜索按钮都包裹在一个 div 中，然后使搜索按钮绝对定位。 Then you can ad some jQuery functionality on a click function to achieve an event is needs be.然后你可以在点击功能上添加一些 jQuery 功能来实现一个事件是需要的。
<html>
<body>
<div>
<input type="text" value="test"/>
<span id="search" class="absolute">x</span>
</div>
<style>
.absolute {
position:absolute;
top:9px;
left:115px;
}
</style>
<script>
$(document).on('click','#search',function(){
//some functionality
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.