如何在Bootstrap 3中的xs视图中把navbar-default切换为navbar-inverse？

Question

请让我知道，是否有办法切换 navbar-default 到 navbar-inverse 在Bootstrap 3的xs View中，如果有的话，请问你能让我知道怎么做吗？

Answer 1

你不能用Bootstrap的默认行为来做这个。

选项#1 (js)

使用jQuery来检测你何时应该使用 navbar-default 或 navbar-inverse :

function refreshNavbar() {
    $('.navbar')
        .removeClass('navbar-default navbar-inverse')
        .addClass($(window).width() <= 768 
                      ? 'navbar-inverse' 
                      : 'navbar-default');
}

$(window).on('resize', refreshNavbar); // on window.resize
refreshNavbar(); // on window.load

选项2 (no-js)

复制 navbar-inverse 代码，并使自己的 navbar-autoinverse :

<nav class="navbar navbar-default navbar-autoinverse" role="navigation">
    ...
</nav>

@media (max-width: 767px) {
    .navbar-autoinverse {
      background-color: #222222;
      border-color: #080808;
    }

    .navbar-autoinverse .navbar-brand {
      color: #999999;
    }

    .navbar-autoinverse .navbar-brand:hover,
    .navbar-autoinverse .navbar-brand:focus {
      color: #ffffff;
      background-color: transparent;
    }

    .navbar-autoinverse .navbar-text {
      color: #999999;
    }

    .navbar-autoinverse .navbar-nav > li > a {
      color: #999999;
    }

    .navbar-autoinverse .navbar-nav > li > a:hover,
    .navbar-autoinverse .navbar-nav > li > a:focus {
      color: #ffffff;
      background-color: transparent;
    }

    .navbar-autoinverse .navbar-nav > .active > a,
    .navbar-autoinverse .navbar-nav > .active > a:hover,
    .navbar-autoinverse .navbar-nav > .active > a:focus {
      color: #ffffff;
      background-color: #080808;
    }

    .navbar-autoinverse .navbar-nav > .disabled > a,
    .navbar-autoinverse .navbar-nav > .disabled > a:hover,
    .navbar-autoinverse .navbar-nav > .disabled > a:focus {
      color: #444444;
      background-color: transparent;
    }

    .navbar-autoinverse .navbar-toggle {
      border-color: #333333;
    }

    .navbar-autoinverse .navbar-toggle:hover,
    .navbar-autoinverse .navbar-toggle:focus {
      background-color: #333333;
    }

    .navbar-autoinverse .navbar-toggle .icon-bar {
      background-color: #ffffff;
    }

    .navbar-autoinverse .navbar-collapse,
    .navbar-autoinverse .navbar-form {
      border-color: #101010;
    }

    .navbar-autoinverse .navbar-nav > .open > a,
    .navbar-autoinverse .navbar-nav > .open > a:hover,
    .navbar-autoinverse .navbar-nav > .open > a:focus {
      color: #ffffff;
      background-color: #080808;
    }

    .navbar-autoinverse .navbar-nav > .dropdown > a:hover .caret {
      border-top-color: #ffffff;
      border-bottom-color: #ffffff;
    }

    .navbar-autoinverse .navbar-nav > .dropdown > a .caret {
      border-top-color: #999999;
      border-bottom-color: #999999;
    }

    .navbar-autoinverse .navbar-nav > .open > a .caret,
    .navbar-autoinverse .navbar-nav > .open > a:hover .caret,
    .navbar-autoinverse .navbar-nav > .open > a:focus .caret {
      border-top-color: #ffffff;
      border-bottom-color: #ffffff;
    }

    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #080808;
    }
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > li > a {
        color: #999999;
    }
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #ffffff;
        background-color: transparent;
    }
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #ffffff;
        background-color: #080808;
    }
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .disabled > a:hover
    .navbar-autoinverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #444444;
        background-color: transparent;
    }

    .navbar-autoinverse .navbar-link {
      color: #999999;
    }

    .navbar-autoinverse .navbar-link:hover {
      color: #ffffff;
    }
}

Answer 2

我不相信Bootstrap有任何方法可以在开箱即用的情况下做到这一点。你最好的办法是使用Javascript来切换类。你应该可以用jQuery来做这样的事情。

if ($(window).width() <= 768) {
  $('#NAVBAR_ID').addClass('navbar-inverse');
} else {
  $('#NAVBAR_ID').removeClass('navbar-inverse');
}