小さな画面でナビゲーションバーを調整する方法は？

Question

ブートストラップ3を使用してページ内にnavbarを作っていますが、小さな画面ではうまくいきません。画面を最小化しようとするとnav barがうまく収まらないのですが、何が問題なのですか？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> 

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

Answer 2

フィドルはとても崩壊コンポーネントが動作していないbootstrap.jsが含まれていません。 cssとjsの両方が含まれているとうまく動作します。

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