在Bootstrap的主菜单中添加搜索栏
在Bootstrap的主菜单中添加搜索栏
提问于 2013-02-19 06:02:32
我正在用Twitter的Bootstrap做一个网站，一切都准备好了，但我不知道如何在主菜单中定位搜索栏
这是网站online http://testings.coffeecup.com/index1.html
每次我把它放在容器上的任何地方，它都会搞砸。
编辑：
我设法添加了它：
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
但我还是不能把它放在右边。
我使用的css
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}回答 3
Stack Overflow用户
回答已采纳
发布于 2013-02-19 06:12:19
紧跟在<div class="navbar-inner">之后，包含搜索栏<input>和您需要的任何属性。之后，只需将其向右浮动并调整页边距，使其在导航栏中垂直居中。
Stack Overflow用户
发布于 2013-02-19 06:11:03
你必须在<div class="navbar-inner">和<div class="nav-collapse collapse">之后添加搜索栏。
搜索栏的代码：
<input id="search" class="span3" type="search" name="search" placeholder="Search">Stack Overflow用户
发布于 2013-02-19 06:22:39
可以使用pull-right类
我在容器里用过
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li><a href="#">Link</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>REsult：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14946104
复制相关文章
相似问题
腾讯云开发者
