Bootstrap 3没有在手机上显示汉堡菜单和徽标

Question

I'm using the following code to show a logo in the middle and 2 navigation link items on either side. This works perfect when in desktop mode, but when its reduced to mobile, it just disappears. I would like the logo to the left and hamburger menu to the right on mobile. Is this possible?

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <header role="banner"> <nav id="navbar-primary" class="navbar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li><a href="/advertise">Advertise</a></li> <li><a href="/contact">Contact</a></li> <li> <a href="/"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a> </li> <li><a href="/register">Register</a></li> <li><a href="/login">Login</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </header> <!-- header role="banner" --> 

Answer 1

Try this one

 .mob-Logo { display: none; } @media only screen and (max-width: 767px) { .desk-Logo { display: none; } .mob-Logo { display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <header role="banner"> <nav id="navbar-primary" class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="mob-Logo"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a> </div> <div class="collapse navbar-collapse" id="navbar-primary-collapse"> <ul class="nav navbar-nav"> <li><a href="/advertise">Advertise</a></li> <li><a href="/contact">Contact</a></li> <li class="desk-logo"> <a href="/"><img id="logo-navbar-middle" src="logo.png" width="180" alt="Logo here"></a> </li> <li><a href="/register">Register</a></li> <li><a href="/login">Login</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </header>