如何更改移动设备未固定的标题,但固定为md和lg屏幕大小？
例如,您可以将nav类更改为;
移动设备：< nav class =“navbar navbar-default”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>
解决方法
您想要与移动设备或更小的屏幕尺寸隔离？有区别.如果你想要后者：
HTML：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS：
@media (min-width:992px) {
body {padding-top:HEIGHTOFNAVBAR}
.navbar-static-top {position:fixed;top:0;right:0;left:0;}
}
如果您想要在移动设备上实际避免固定导航,您可以使用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
}
}
})();
然后你可以使用HTML(相同)：
<nav class="navbar navbar-default navbar-static-top" role="navigation">
CSS
.no-touch body {padding-top:HEIGHTOFNAVBAR}
.no-touch .navbar-static-top {position:fixed;top:0;right:0;left:0;}