twitter-bootstrap Bootstrap 导航栏 - 从移动设备中删除固定标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27861319/
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
Bootstrap navbar - removing fixed header from mobile devices
提问by man-oh-man
How do I change the header to be not fixed for mobile devices, but fixed for md and lg screen sizes?
如何将标题更改为不固定用于移动设备，而是固定用于 md 和 lg 屏幕尺寸？
For example can you change the nav class to;
例如，您可以将导航类更改为；
Mobile: <nav class="navbar navbar-default" role="navigation">
移动的： <nav class="navbar navbar-default" role="navigation">
Desktop: <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
桌面： <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
??
??
<nav 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-brand-centered">
<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="navbar-brand navbar-brand-centered">Brand</div>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
回答by Christina
You want to isolate from mobile devices or smaller screen sizes? There's a difference. If you want the latter:
您想与移动设备或较小的屏幕尺寸隔离吗？有区别。如果你想要后者：
HTML:
HTML：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS:
CSS：
@media (min-width:992px) {
body {padding-top:HEIGHTOFNAVBAR}
.navbar-static-top {position:fixed;top:0;right:0;left:0;}
}
If you want actually avoid fixed navigation on mobile devices, you can sniff out whether or not the device is touch or not with javascript.
如果您想真正避免移动设备上的固定导航，您可以使用 javascript 嗅探设备是否触摸。
/* --------------- SUPPORTS TOUCH OR NOT for IOS, Android, and Windows Mobile --------------- */
/*! Detects touch support and adds appropriate classes to html and returns a JS object | Copyright (c) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au / Licensed under the MIT license | https://coderwall.com/p/egbgdw */
var supports = (function() {
var d = document.documentElement,
c = "ontouchstart" in window || navigator.msMaxTouchPoints;
if (c) {
d.className += " touch";
return {
touch: true
}
} else {
d.className += " no-touch";
return {
touch: false
}
}
})();
Then you can use HTML (the same):
然后你可以使用 HTML（相同）：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS
CSS
.no-touch body {padding-top:HEIGHTOFNAVBAR}
.no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}
回答by Persijn
To set the none fixed header for mobiles is not to hard its just a CSS propety:
为手机设置非固定标头并不难，它只是一个 CSS 属性：
CSS
CSS
.headerclass { position:static;} //over rides the position fixed
.headerclass { position:static;} //over rides the position fixed
Now changing the classes is a bit harder but what you can do is hook onto the media query changes. This needs to be done with Jquery (comes with bootstrap).
现在更改类有点困难，但您可以做的是挂钩媒体查询更改。这需要使用 Jquery 来完成（带有引导程序）。
You have to search for css changes. If we set some value on a media query then we can toggle classes.
您必须搜索 css 更改。如果我们在媒体查询上设置一些值，那么我们可以切换类。
CSS
CSS
@media only screen
and (min-device-width : 1224px) {
width:300px;
}
JavaScript Jquery
JavaScript 查询
var navbar = $('navbar');
if (navbar.css('width') == '300px') {
navbar.addClass('navbar-default navbar-fixed-top');
}
I use these measurements : Link
我使用这些测量值：链接
