如何在小屏幕上调整导航栏？

-2

我正在使用引导程序3在我的页面中制作导航栏，它不适用于小屏幕，当我尝试最小化屏幕时，导航栏未折叠良好，问题是什么？下面是一个jsFiddle 如何在小屏幕上调整导航栏？

<div class="container"> 
    <div class="row"> 
     <img id="logo" src="../lib/css/images/Logo.jpg" class="pull-left" width="100px" height="100px"> 
     <nav class="navbar navbar-inverse" style="height: 40px;margin-left: 105px;"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar" aria-expanded="false"> 
          <span class="sr-only">Toggle navigation</span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" style="height: 30px;margin-top:-12px;">Welcome</a> 
       </div> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-1">Add New Category</a></li> 
          <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-2">Search Orders</a></li> 
          <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-3">Calendar</a></li> 
          <li class="dropdown"><a href="#" data-toggle="modal" data-target="#modal-4">Order status</a></li> 
         </ul> 
         <ul> 
          <li class="nav navbar-nav navbar-right"> 
           <?php 
            if(isset($_SESSION["username"])) 
            { 
             echo '<a href="../logout.php" id="logout" class="btn btn-success CustLog">Log out</a>'; 
             echo '<h5>Welcome- '.$_SESSION["username"].'</h5>'; 
            } 
            else 
            { 
             header("location:../login.php"); 
            } 
            include_once "connect.php"; 
           ?> 
          </li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 
     </div>

来源

2017-02-20 New at Leaflet

-1

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span>       
     </button> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Page 1-1</a></li> 
      <li><a href="#">Page 1-2</a></li> 
      <li><a href="#">Page 1-3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

来源

2017-02-20 19:31:04 Aram

小提琴不包括bootstrap.js因此崩溃组件无法正常工作。当包括css和js时它工作正常。

http://www.codeply.com/go/VKrQTeUB4v

来源

2017-02-20 19:32:40 ZimSystem

请检查结果我在页面上得出上述快照当我尝试到页面最小化 –

如何在小屏幕上调整导航栏？

回答

相关问题