twitter-bootstrap Bootstrap 导航栏中的固定搜索框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39060926/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:14:05 来源:igfitidea点击:
Fixed Search Box in Bootstrap Navbar
提问by Vianne
I'm trying to figure out how to make the search box fixed in the navigation bar instead of being part of the dropdown menu. The final output would be something similar to the image below.
我想弄清楚如何使搜索框固定在导航栏中，而不是成为下拉菜单的一部分。最终输出将类似于下图。
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
<!-- add search form -->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this site">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
Here's the code I'm currently working on: http://www.bootply.com/fb311f2zSJ#
这是我目前正在处理的代码：http: //www.bootply.com/fb311f2zSJ#
采纳答案by Omar Faruque
Try this:
试试这个：
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
/* CSS used here will be applied after bootstrap.css */
.navbar-header form {
position: absolute;
right: 20px;
max-width: 250px;
}
button.navbar-toggle.pull-left {
margin-left: 15px;
}
@media only screen and (max-width:768px){
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: rgba(0,0,0,0);
margin-top: 0;
padding-top: 8px;
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 0px solid transparent;
border-bottom: 0px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0px 0 rgba(255,255,255,.1);
}
}<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- add search form -->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this site">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav" style="width:100%">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>回答by oseme_techguy
You will have to add another search form that will become visible on mobile devices. You can style it with your css to position the search bar properly.
您必须添加另一个将在移动设备上可见的搜索表单。您可以使用 css 设置样式以正确定位搜索栏。
Here is the updated html:
这是更新的html：
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- add the mobile devices search form here -->
<div class="col-xs-10 visible-xs">
<form class="navbar-form navbar-right mobile-search" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search this site" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
<!-- end of the mobile devices search form section -->
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
<!-- add search form -->
<form class="navbar-form navbar-right hidden-xs" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search this site" type="text">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
回答by Mukesh Ram
I have done some changes in default css file may this will help you.
我对默认 css 文件做了一些更改，这可能会对您有所帮助。
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- add header -->
<div class="navbar-header pull-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- add menu -->
<div class="collapse navbar-collapse" id="navbar1">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
</ul>
<!-- add search form -->
</div>
<form class="navbar-form navbar-right pull-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search this site">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</nav>
CSS:
CSS：
@media (min-width:768px){
.navbar-collapse{
float:left
}
}
@media (max-width:767px){
.navbar-form.navbar-right{
border-color: #101010;
width: calc(100% - 30px);
padding: 0;
border: none;
}
.navbar{
border:none;
}
.navbar-collapse{
background-color: #222;
position: absolute;
top: 50px;
width: 100%;
left:0;
margin:0 !important;
}
}
Here is working demo: https://jsfiddle.net/vb8ptav5/
这是工作演示：https: //jsfiddle.net/vb8ptav5/
