Html 将 Bootstrap 3 Navbar-right 对齐并包括搜索框也向右对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23944331/
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
Align Bootstrap 3 Navbar-right and include search box also right-aligned
提问by girlfriday
I'm using bootstrap 3 to build a site and I am having the following problem:
我正在使用 bootstrap 3 构建站点，但遇到以下问题：
The site design I am working from has a right-aligned navigation that should include a search bar following the final link. Here's a visual:http://imgur.com/eevc0iS
我正在使用的网站设计有一个右对齐的导航，在最终链接之后应该包括一个搜索栏。这是一个视觉效果：http: //imgur.com/eevc0iS
I can only seem to make this work if I keep the navigation left aligned after the logo. I can't get the navigation AND the search bar to be in a nice right-aligned line.
如果我在徽标后保持导航左对齐，我似乎只能完成这项工作。我无法将导航和搜索栏置于漂亮的右对齐行中。
I would like to have it look much the same as I have it now, but with that search bar on the other side.
我想让它看起来和我现在的一样，但搜索栏在另一边。
Here's the code:
这是代码：
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="#">BRAND</a>
</div><!-- / .navbar-header-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">link</a></li>
<li><a href="#">link two</a></li>
<li><a href="#">link three</a></li>
<li><a href="#">about</a></li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div><!--/.nav-collapse -->
</div><!-- /. container-->
</div> <!-- /. navbar-->
回答by Marius
You do not need to wrap with a div to float right.
你不需要用 div 包裹来向右浮动。
Simply use the class names already available, the clue is in the markup .navbar-leftand .navbar-right. Use these to float an element left or right within the Navbar and avoid 'divitis'.
只需使用已经可用的类名，线索就在标记.navbar-left和.navbar-right. 使用这些在导航栏中向左或向右浮动元素并避免“divitis”。
You will need to swap the links and search around as we are floating.
您将需要交换链接并在我们浮动时四处搜索。
There is also .pull-leftand .pull-rightthat you can use elsewhere on the page for similar floating requirements.
也有.pull-left和.pull-right你可以在页面上的其他地方使用类似的浮动要求。
回答by Max D
I closed the ul tag after the search-form div. Works perfect.
我在搜索表单 div 之后关闭了 ul 标签。工作完美。
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</ul>
</div><!--/.nav-collapse -->
回答by Cyfloel
I use the newest sample on Bootstrap official site to do the test and I think it can be done by a few css rule. Wrap the elements which you want to be right-aligned and set the wrapper's position and right. See the sample.
我用Bootstrap官网的最新样例来做测试，我认为可以通过一些css规则来完成。包装您想要右对齐的元素并设置包装器的位置和右侧。请参阅示例。
#right
{
position:absolute;
right:0px;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><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><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<div id="right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<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><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
