Bootstrap 导航栏 - 从移动设备中删除固定 header

Question

如何更改 header 不固定用于移动设备，而是固定用于 md 和 lg 屏幕尺寸？

例如，您可以将导航 class 更改为；

手机：<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>

Answer 1

您想隔离移动设备或较小的屏幕尺寸？这是有区别的。如果你想要后者：

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;}

Answer 2

为手机设置 none 固定 header 并不难，它只是一个 CSS 特性：

CSS

.headerclass { position:static;} //over rides the position fixed

现在更改类有点困难，但您可以做的是挂钩媒体查询更改。这需要使用 Jquery 完成（bootstrap）。

您必须搜索 css 更改。如果我们在媒体查询上设置一些值，那么我们可以切换类.

CSS

@media only screen 
and (min-device-width : 1224px) {
    width:300px;
}

JavaScript Jquery

var navbar = $('navbar');
if (navbar.css('width') == '300px') {
    navbar.addClass('navbar-default navbar-fixed-top');
}

我使用这些测量值：Link

Bootstrap 导航栏 - 从移动设备中删除固定 header

Bootstrap navbar - removing fixed header from mobile devices

navbar

twitter-bootstrap

twitter-bootstrap-3