Navbar崩潰不起作用 - Bootstrap

我是Bootstrap和Symfony的新手。我試圖摺疊這個導航欄，但沒有工作。希望您能夠幫助我。Navbar崩潰不起作用 - Bootstrap

下面的代碼：

頭

<head> 
<title> Title </title> 

<meta name="Description" content="HINT"/> 
<meta name="Distribution" content="global"/> 

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="description" content=""> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="author" content="content"> 
<link rel="icon" href="{{asset('favicon.ico')}}"> 
<link href="{{asset('css/base-style.css')}}" rel="stylesheet"> 
<link href="{{asset('css/slider.css')}}" rel="stylesheet"> 
<script type="text/javascript" src="{{asset('js/jssor.js')}}"></script> 
<script type="text/javascript" src="{{asset('js/jssor.slider.js')}}"></script> 

<script type="text/javascript" src="{{asset('js/dropdown.js')}}"></script>

和按鈕顯示在導航欄部分

<div id="header" class="container-fluid"> 
<!-- 
<div class = "logo"> 
    <img src="{{asset('images/Logo.png')}}"></img> 
</div> 
--> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
    <ul> 

     <div class="navbar-header"> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" style="padding:0px;" href="#"> 
      <img class="img-responsive" alt="Brand" src="{{asset('images/Logo.png')}}"/> 
      </a> 
     </div> 

     <li class="active"><a href="{{ path('nucleo_homepage')}}">Home</a></li> 
     <li><a href="{{ path('nucleo_empresa')}}">Business</a></li> 

     <li class="drop"> <a href="#">Servicios</a> 

      <div class="dropdownContain"> 
      <div class="dropOut"> 

       <div class="triangle"></div> 
       <div class="triangle-border"></div> 
        <ul> 
         <li onclick="urlservicios('1');">Head Hunting </li> 
         <li onclick="urlservicios('2');">Study</li> 
         <li onclick="urlservicios('3');">Profiles</li> 
         <li onclick="urlservicios('4');">Consultor&iacute;as</li> 
         <li onclick="urlservicios('5');">Functions</li> 
         <li onclick="urlservicios('6');">Interviews</a></li> 
         <li onclick="urlservicios('7');">Matrix</a></li> 
        </ul> 
      </div> 
      </div > 
     </li> 

     <li class="drop"> <a href="{{ path('nucleo_cv')}}"> TEXT </a> 
     <div class="dropdownContain"> 
      <div class="dropOut"> 

      </div> 
      </div> 
     </li> 

     <li class="drop"> <a href="{{ path('nucleo_contactos')}}">Contact us</a> 
     <div class="dropdownContain"> 
      <div class="dropOut"> 

       <ul> 

      </div> 
     </div> 
       </ul> 
     </li> 

    </ul> 
    </div>   
</nav> 

     </div>

，但它不會崩潰。

來源

2015-10-16 francisco cueva

您錯過了崩潰的目標。關閉後，「導航欄頭」補充：

<div class="collapse navbar-collapse" id="myNavbar"> 
    ... the rest of your navbar 
</div>

請參閱本頁面底部的例子：

http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

來源

2015-10-16 15:56:20

感謝您的建議。我嘗試過，但Navbar只是保持摺疊狀態。 –

試試這個：引導3，你需要的jquery.js（少於版本3）和bootstrap.js來處理切換功能。

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a href="#" class="navbar-brand">Brand Name</a> 
     <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseMenu"> 
     <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="collapseMenu"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Service</a></li> 
     <li><a href="#">Contact Us</a></li> 
     </ul> 
    </div>   
    </div> 
</nav>

來源

2016-09-29 10:49:39

試試這個

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 


     <div class="navbar-header"> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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 class="navbar-brand" style="padding:0px;" href="#"> 
      <img class="img-responsive" alt="Brand" src="{{asset('images/Logo.png')}}"/> 
      </a> 
     </div> 
<ul class="nav navbar-nav"> 
     <li class="active"><a href="{{ path('nucleo_homepage')}}">Home</a></li> 
     <li><a href="{{ path('nucleo_empresa')}}">Business</a></li> 

     <li class="dropdown"> 

<a class="dropdown-toggle" data-toggle="dropdown" href="#">Servicios 
     <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li onclick="urlservicios('1');">Head Hunting </li> 
         <li onclick="urlservicios('2');">Study</li> 
         <li onclick="urlservicios('3');">Profiles</li> 
         <li onclick="urlservicios('4');">Consultor&iacute;as</li> 
         <li onclick="urlservicios('5');">Functions</li> 
         <li onclick="urlservicios('6');">Interviews</a></li> 
         <li onclick="urlservicios('7');">Matrix</a></li> 
     </ul> 


     </li> 
</ul 

     <li class="drop"> <a href="{{ path('nucleo_cv')}}"> TEXT </a> 
     <div class="dropdownContain"> 
      <div class="dropOut"> 

      </div> 
      </div> 
     </li> 

     <li class="drop"> <a href="{{ path('nucleo_contactos')}}">Contact us</a> 
     <div class="dropdownContain"> 
      <div class="dropOut"> 

       <ul> 

      </div> 
     </div> 
       </ul> 
     </li> 

    </ul> 
    </div>   
</nav>

來源

2016-09-29 11:26:18

Navbar崩潰不起作用 - Bootstrap

回答

相關問題