我正在尝试使用Bootstrap 3实现如下截图所示的效果。
如您所见,搜索按钮均为:
1)输入内部
2)用glyphicon设计,以便不像“按钮”。
如何使用Bootstrap 3获得类似的效果?我想在文本输入的末尾放置一个带放大镜glyphicon的按钮,但是按钮会一直显示在输入下方而不是内部。
答案 0 :(得分:9)
使用position: relative;
的包装器div,然后使用position: absolute;
将提交按钮置于顶部。像这样:
<强> HTML 强>
<form>
<div id="search">
<input type="text" />
<button type="sutmit">Search</button>
</div>
</form>
<强> CSS 强>
#search {
position: relative;
width: 200px;
}
#search input {
width: 194px;
}
#search button {
position: absolute;
top: 0;
right: 0;
margin: 3px 0;
}
答案 1 :(得分:4)
试试这个。
在bootstrap中你必须使用按钮类型提交而不是输入类型; 两者都很好!在bootstrap中使用按钮!
div {
padding: 15px;
background: #000;
}
.btn {
text-align: left !important;
font-size: 12px !important;
padding: 20px 12px !important;
width: 200px !important;
color: #888 !important;
}
&#13;
<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>
&#13;
或者看到这个fiddle
<button type="submit" class="btn btn-default">
Awesomeness <span class="glyphicon glyphicon-search"></span>
</button>
答案 2 :(得分:-1)
问题是因为该按钮是对html正常流的听觉,因此出现在第一个元素下方。您需要做的是将输入和搜索按钮包装在div中,然后使搜索按钮绝对定位。然后,您可以在点击功能上添加一些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>