twitter-bootstrap 响应式 Bootstrap 导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26457064/
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
Responsive Bootstrap Navbar
提问by rfj001
I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.
我正在尝试为我的网站制作一个导航栏，左侧有一个下拉菜单，中间有一个图像，右侧有一个可折叠的项目。我正在使用较少的引导程序来设置导航栏的样式，但我遇到了麻烦。
I have searched Stack overflow looking for ways to make this work, like thisquestion, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.
我已经搜索了堆栈溢出，寻找使这项工作起作用的方法，例如这个问题，但是那里的解决方案对我不起作用。我似乎无法让我的图像对齐，使其水平轴与下拉菜单、可折叠项目和导航栏容器居中。当我尝试前面提到的链接中的解决方案时，通过最大化其固定位置将图像从页面流中取出，它总是出现在导航栏下方。我可以通过弄乱 CSS 属性来为我的屏幕修复这个问题，但是一旦我调整了窗口的大小，事情就看起来很糟糕。
Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?
有没有办法（可能使用较少）来设置引导程序导航栏的样式，以便无论窗口的大小如何，我都有一个项目在左侧，图像在中心，项目在右侧，所有项目共享一个公共水平中心带导航栏的轴？
EDIT
编辑
Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:
好的，所以我改变了主意，决定在左侧添加一些链接，在中间添加一个图像，在右侧添加一些链接。当屏幕变小时，我希望链接折叠到右侧，为菜单提供一个切换按钮。折叠工作正常，但是当链接在屏幕上时，我希望它们与图像一起在导航栏中水平居中。现在的图像部分在导航栏中，部分在外面。我还希望当链接在较小的屏幕尺寸下折叠时图像向左滑动。这是我现在的代码：
Just a note that I am using django to serve the html, hence the syntax for the image src.
请注意，我使用 django 来提供 html，因此是图像 src 的语法。
#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#itemonelink">Item One</a></li>
<li><a href="#itemtwolink">Item Two</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#signuplink">Signup</a></li>
<li><a href="#loginlink">Login</a></li>
</ul>
</div>
</nav>回答by Winter
So you're looking to do something like this, with the image fitted:
所以你想要做这样的事情，图像适合：
HTML
HTML
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-center" href="#">
<img src="http://placehold.it/100x40" alt="Logo Here">
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#itemonelink">Item One</a></li>
<li><a href="#itemtwolink">Item Two</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#signuplink">Signup</a></li>
<li><a href="#loginlink">Login</a></li>
</ul>
</div>
</nav>
CSS
CSS
.navbar-brand {
float: none;
padding: 5px;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
Demo: JSFiddle
演示：JSFiddle
回答by Nikit Barochiya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar bootstrap</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
回答by FOD
Navigation bar is coolest component of bootstrap, you can easily create cool responsive navigation header for your website.
导航栏是引导程序中最酷的组件，您可以轻松地为您的网站创建酷炫的响应式导航标题。
For information and detail please see this article.. steps to create navbar in bootstrap
有关信息和详细信息，请参阅本文.. 在引导程序中创建导航栏的步骤
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo / SiteName</a>
</div>
<div class="collapse navbar-collapse" id="testNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
</div>
</nav>