Hide navbar in mobile browsers

问题

I'm making a mobile responsive site using Twitter Bootstrap. I'd like to completely hide the top navbar when the site is viewed on mobile. Anyone know a way to do this?

回答1:

The easiest way is to use the responsive utility classes .hidden-phone and .hidden-tablet

<div class="navbar hidden-tablet hidden-phone">

You could also use a media query such as..

@media (max-width: 767px) { 
    .navbar{
        display:none;
    }
}

More on responsive classes here: http://twitter.github.io/bootstrap/scaffolding.html#responsive

Demo

回答2:

Bootstrap 3 has just .hidden-xs/sm/md/lg

Phone/tablet/desktop apply for BS2.x only

回答3:

Try this!
just add "hidden-xs" to the div class

<div class="navbar hidden-xs">

来源：https://stackoverflow.com/questions/16655538/hide-navbar-in-mobile-browsers