twitter-bootstrap 在没有响应式折叠的情况下使用 Bootstrap 3 Navbar 的最佳方式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18292521/
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
Best way to use Bootstrap 3 Navbar without responsive collapse
提问by Ender2050
I'm trying to create a simple Navbar in Bootstrap 3 that doesn't collapse - responsive isn't necessary here because we just have a simple title on the left + button on the right.
我正在尝试在 Bootstrap 3 中创建一个不会折叠的简单导航栏 - 这里不需要响应，因为我们只有一个简单的标题在左侧 + 右侧按钮上。
My goal is to have the title + buttons always appear the same for all resolutions. Something like this:
我的目标是让标题 + 按钮在所有分辨率下始终显示相同。像这样的东西：
<div class="navbar navbar-fixed-top">
<form class="navbar-form navbar-right">
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
</form>
<a class="navbar-brand" href="#">Title Here</a>
</div>
I've tried numerous combinations from the documentation. And this post outlines how to use the new .nav-header classes. I've tried duplicating the elements inside .nav-header - and also tried overriding the BS3 media query styles.
我已经尝试了文档中的多种组合。而这篇文章概述了如何使用新的.nav头班。我尝试复制 .nav-header 中的元素 - 并尝试覆盖 BS3 媒体查询样式。
Is there an easier way to use the Navbar without collapsing?
有没有更简单的方法来使用导航栏而不折叠？
回答by Zim
The best way I could find is to use 2 navbar-headercontainers, and then use pull-leftand pull-rightsince they aren't tied to any responsive media queries..
我能找到的最好方法是使用 2 个navbar-header容器，然后使用pull-left和pull-right因为它们不绑定到任何响应媒体查询..
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#">Title Here</a>
</div>
<div class="navbar-header pull-right">
<button type="button" class="btn btn-default navbar-btn">Button 1</button>
<button type="button" class="btn btn-default navbar-btn">Button 2</button>
</div>
</div>
Demo on Bootply: http://bootply.com/74912
Bootply 上的演示：http://bootply.com/74912
回答by Kaushik Thirthappa
In my case, i only used the navbar-headerand nothing else.
就我而言，我只使用了navbar-header，没有别的。
Basically, the navbar-header would help me easily get all the header css in there. Inside of it, i added a container and played around with my options for a similar case as yours.
基本上，导航栏标题可以帮助我轻松地将所有标题 css 放入其中。在其中，我添加了一个容器，并针对与您类似的案例使用了我的选项。
<nav class="navbar navbar-default navbar-fixed-top" id="transient-header">
<div class="container clearfix">
<div class="transient-header-block clearfix">
<h1 class="hide" href="/" style="color: #fff;">Primary</h1>
<a class="navbar-brand" href="/">{{> svgs/logos/_white_symbol}}</a>
<div class="pull-right price">
<a href="#" class="btn btn-white-border contact-modal" href="#contactModal">
{{> svgs/_white_rupee_icon}}
{{product.price}}
</a>
</div>
</div>
</div>
</nav>
