我希望我的搜索框出现在桌面和移动设备的导航栏中。目前，当我减小宽度时，搜索栏会下降到下一行。我不知道如何使其与导航栏保持齐平。
代码如下:http://plnkr.co/edit/Unr6MEiIkF6WpXwCCgkF?p=preview
我能够通过在“导航栏标题”部分中插入第二个搜索框来实现所需的效果，但这会导致预输入代码变得疯狂。
代码
这是我的 HTML 的 header 部分:
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
<a href="/things">Pick Me!</a>
</li>
<li>
<a href="/thing/2">me me me me!</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
如有任何指导，我们将不胜感激。
引用文献
其他人也有类似的问题，但它们似乎都有点不同，很大程度上是因为没有超标准的方法来做到这一点，而且因为人们希望他们的网页以不同的方式运行。
Aligning search bar for mobile with bootstrap 3
[更新]更新了 plunkr 中的 css，以显示导航栏以不同的背景颜色延伸到顶部。
最佳答案
将搜索和折叠的导航栏从标题中拉出并右对齐似乎可以解决问题
http://plnkr.co/edit/B4gIfAkNiwkBId9fbLVi?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<!-- your app.js file -->
<script src="app.js"></script>
<!-- bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<!-- your style.css file -->
<link href="style.css" rel="stylesheet" />
</head>
<body class="pages welcome">
<style>
body { background-color: #F9F7F5; }
</style>
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<button class="pull-right navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="container">
<div class="navbar-header">
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
<a href="/things">Pick Me!</a>
</li>
<li>
<a href="/thing/2">me me me me!</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-2">
<h1 class="page-title">Welcome to the Project</h1>
<p>This is the body.</p>
</div>
</div>
</div>
</body>
</html>
关于html - 使用 bootstrap 3.3 对齐移动设备和桌面的搜索栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31343657/