Question

如果有办法将navbar-default切换到navbar-inverse在xs View in Bootstrap 3中，可以告诉我吗？如果可以，请告诉我如何做到这一点？

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

<强> JSFiddle

选项＃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;
    }
}

<强> JSFiddle

Answer 2

我不相信有任何方法可以使用Bootstrap开箱即用。最好的方法是使用Javascript来切换类。您应该能够使用jQuery执行以下操作：

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

如何切换navbar-default到navbar-inverse In xs View in Bootstrap 3

2 个答案:

选项＃1（js）

选项＃2（no-js）