Question

我正在使用bootstrap 3在我的页面中创建一个导航栏，它在小屏幕上效果不佳，当我尝试最小化屏幕时，导航栏没有很好地崩溃，这是什么问题？这是一个{ {3}}

<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>

jsFiddle

Answer 1

小提琴并不包含bootstrap.js所以崩溃组件不起作用。当包含css和js时，它工作正常。

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

Answer 2

<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>

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

2 个答案: