Boostrap切換爲Navbar不擴展

我已經回顧了幾個有關此問題的回答問題，並且無法使用導航欄菜單。而且他們對我目前的編碼沒有幫助。菜單欄不擴展，並且不在頁面頂部內聯（在一行中）。Boostrap切換爲Navbar不擴展

菜單目前看起來是這樣的：

<nav class="navbar navbar-inverse navbar-fixed-top navtop" role=navigation> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
     
 
    <!-- This button allows for mobile navigation, it collapses the navbar on smaller screens, the span class creates the three lines indicating a dropdown menu -->  
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>   <span class="icon-bar"></span> 
 
      </button> 
 
       <a href="#" class="navbar-brand">CodeMcCoy</a>  
 
    </div> <!--navbar-header --> 
 
    <div class="collapse navbar-collapse navHeaderCollapse"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
    <li class="active"><a href="#Home"><span class="glyphicon glyphicon-home"></span>Home</a></li> 
 
    <li><a href="#About"><span class="glyphicon glyphicon-user"></span>About</a></li> 
 
    <li><a href="#Portfolio"><span class="glyphicon glyphicon-pushpin"></span>Portfolio</a></li> 
 
    <li><a href="#Contact"><span class="glyphicon glyphicon-envelope"></span>Contact</a></li> 
 
</ul> 
 
    </div> <!--NavHeaderCollapse--> 
 
      </div> <!--container--> 
 
    </nav> <!--navbar -->

來源

2017-08-30 CodeMcCoy

你怎麼包括你的項目的JavaScript文件？ – cwanjt

我開始傾向於認爲，有依賴關係缺少項目，即CSS和JS文件引導（也可能是jquery）。我已將您提供的代碼放入代碼項目中，您可以查看here。一切似乎都正常運作。

來源

2017-08-30 22:32:25 cwanjt

非常感謝你，我終於明白了，是的，我錯過了js文件。然而，對於我的生活，我無法弄清楚爲什麼導航欄不會保持水平。它仍然有導航欄，當沒有摺疊，看起來垂直，而不是在同一行...也許我應該添加一個div行？ – CodeMcCoy

導航欄不保持水平...即使在代碼項目中......或者您是否希望切換的導航水平顯示？ – cwanjt

即使屏幕很大，它在常規模式下也不是水平的。它與大屏幕垂直，頂部有BIG導航欄以補償垂直。當我只希望它是水平的，然後用較小的屏幕摺疊。 – CodeMcCoy

嘿，如果你正在使用bootstrap 4.0 alpha6這裏是這裏的navbar

轉到代碼https://v4-alpha.getbootstrap.com/components/navbar/

嘿，如果你使用的是bootstrap 4.0測試版已經出現在類的幾個變化使用：

.badge-default to .badge-dark 

.bg-faded to .bg-light 

.bg-inverse to .bg-dark 

.card-block to .card-body 

.card-outline-primary to .border-primary 

.card-outline-secondary to .border-secondary 

.card-outline-success to .border-success 

.card-outline-info to .border-info 

.card-outline-warning to .border-warning 

.card-primary to .bg-primary 

.card-success to .bg-success 

.card-info to .bg-info 

.card-warning to .bg-warning 

.card-danger to .bg-danger 

.hidden-xs-down to .d-none .d-sm-block 

.hidden-sm-down to .d-none .d-md-block 

.hidden-md-down to .d-none .d-lg-block 

.hidden-lg-down to .d-none .d-xl-block 

.hidden-xs-up to .d-none 

.hidden-sm-up to .d-sm-none 

.hidden-md-up to .d-md-none 

.hidden-lg-up to .d-lg-none 

.hidden-xl-up to .d-xl-none 

.navbar-toggleable-sm to .navbar-expand-sm 

.navbar-toggleable-md to .navbar-expand-md 

.navbar-toggleable-lg to .navbar-expand-lg 

.navbar-toggleable-xl to .navbar-expand-xl

這是從https://medium.com/@lukaszholeczek/how-to-upgrade-bootstrap-4-alpha-6-to-bootstrap-4-beta-d43b4210f2a3借來的我希望這可以幫到你

來源

2017-08-31 05:49:48

Boostrap切換爲Navbar不擴展

回答

相關問題