2017-08-04 202 views
0

我複製了這個引導模板。我有一個問題是,當它處於移動模式(小屏幕)時,它不會在漢堡內顯示側邊欄菜單(儀表板,菜單,內容,類別等)。我該如何解決它?Bootstrap Navbar摺疊按鈕問題

我的HTML代碼:

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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" href="{{ url('cms/dashboard')}}">Myhero admin panel</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a target="blank" href="{{ url('')}}">Back to site</a></li> 
      <li><a href="{{ url('user/logout')}}">Logout</a></li>     
      </ul>     
     </div> 
     </div> 
    </nav>  
    <div class="container-fluid"> 
     <div class="row"> 
     <div class="col-xs-2 col-sm-3 col-md-2 sidebar "> 
      <ul class="nav nav-sidebar "> 
      <li><a href="{{ url('cms/dashboard')}}">Dashboard</a></li> 
      <li><a href="{{ url('cms/menu')}}">Menu</a></li> 
      <li><a href="{{ url('cms/content')}}">Content</a></li> 
      <li><a href="{{ url('cms/categories')}}">Categories</a></li> 
      <li><a href="{{ url('cms/products')}}">Products</a></li> 
      <li><a href="{{ url('cms/orders')}}">Orders</a></li> 
      </ul> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
      @include ('inc.sm') 
      @include ('inc.errors') 
     </div> 
     </div> 
     @yield('cms_content') 
    </div> 
    </body> 
+0

可以在CSS被achived請提供你的CSS腳本 –

+0

@WojtekT我沒有爲這一個 –

+0

您將需要包括引導例如'<鏈接的rel =「樣式表的」 href任何CSS =「HTTPS ://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css「>'如果你不知道你的代碼會遍佈整個地方。 –

回答

0

如果禁用JavaScript和視口就足夠了導航欄崩潰窄,就不可能擴大導航欄和查看.navbar崩潰中的內容。

響應式導航欄需要將崩潰插件包含在您的Bootstrap版本中。爲確保您擁有最新的引導工作版本,您可以使用cdn來提供所需的JavaScript文件。

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity=[...]> 
+0

您可以在上面的註釋中使用與Wojtek提到的CSS相同的方法。 – JuSolyj

+0

我的代碼裏有bootstrap cdn,我只是沒把它放在這裏,因爲它與我的問題無關:) –

+0

好的。謝謝(你的)信息。控制檯中是否顯示任何內容?例如,當你點擊漢堡時。 – JuSolyj