twitter-bootstrap Bootstrap 响应时如何更改导航栏位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20381933/
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
How do i change the Navbar Position when Bootstrap goes responsive
提问by Evolis
The desktop view of the website got a logo and a navigation under it.
I want the position of the navigation to become above the logo (and also create a little space between the logo and navbar) when it switches to mobile view.
该网站的桌面视图下有一个徽标和一个导航。
我希望导航的位置在切换到移动视图时位于徽标上方（并在徽标和导航栏之间创建一个小空间）。
Here is desktop view:
这是桌面视图：
Mobile view:
移动视图：
What I want mobile view to be:
我希望移动视图是什么：
HTML:
HTML：
<div class="text-center logo">
<a href="index.html"><img src="img/brand.png" /></a>
<span class="brand-headline visible-desktop">
<p class="title-text">Example</p>
</span>
</div>
<!-- =begin navigation !-->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-target">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand brand" href="#">Brand</span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-target">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Schuhe</a></li>
<li><a href="#">Link</a></li>
</div><!-- /.navbar-collapse -->
</div>
</nav>
回答by Christina
Until there's more support for FlexBox the way I do it is to clone it with jQuery. I do it all the time since BS3 menu requires jQuery anyway.
在 FlexBox 获得更多支持之前，我的做法是使用 jQuery 克隆它。我一直这样做，因为无论如何 BS3 菜单都需要 jQuery。
THE DEMO:http://jsbin.com/oVifowe/1/
演示：http : //jsbin.com/oVifowe/1/
/* __________________ Mobile Menu __________________*/
$(document).ready(function() {
$('.navbar').clone().removeClass('hidden-xs').appendTo('.mobile-menu');
}); //end
The HTML:
HTML：
<div class="mobile-menu visible-xs"><!--MENU CLONES HERE--></div>
<div class="text-center logo">
<a href="index.html"><img src="img/brand.png" /></a>
<span class="brand-headline visible-desktop">
<p class="title-text">LOGO</p>
</span>
</div>
<!-- begin navigation !-->
<nav class="navbar navbar-default hidden-xs" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-target">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-target">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Schuhe</a></li>
<li><a href="#">Link</a></li>
</div><!-- /.navbar-collapse -->
</div>
</nav>
回答by nikans
@media(max-width: 767px) {
.navbar.navbar-default {
position:fixed; top:0; left:0; z-index:1030;
}
}
You may also want to add top padding to body or main wrapper on tablets and smaller.
您可能还想在平板电脑和更小的平板电脑上为主体或主要包装添加顶部填充物。
回答by Bart Calixto
you can make the position of the navigation fixed top on small devices. Other than that, you may have to switch templates for the different versions because you are changing the order of the html flow.
您可以将导航的位置固定在小型设备的顶部。除此之外，您可能需要为不同版本切换模板，因为您正在更改 html 流程的顺序。
