Bootstrap 4 Navbar在頁面加載時摺疊移動（Laravel/laravel-mix）

Question

嗯，我不太確定這一點，因爲這對我來說絕對沒有意義。

我正在使用最新版本的Laravel和Laravel Mix，它們可能相關，也可能不相關。

我已經更新Laravel使用最新的引導4阿爾法具有以下依存關係：這裏

"axios": "^0.16.2", 
"bootstrap": "^4.0.0-alpha.6", 
"cross-env": "^5.0.1", 
"jquery": "^3.1.1", 
"laravel-mix": "^1.0", 
"lodash": "^4.17.4", 
"vue": "^2.1.10", 
"tether": "^1.4.0", 
"popper.js": "^1.11.0" 

一切都是正確的版本。

我已經更新了我bootstrap.js以包括正確引導模塊和新要求的模塊：

try { 
    window.$ = window.jQuery = require('jquery'); 

    window.Tether = require('tether'); 
    window.Popper = require('popper.js').default; 
    require('bootstrap'); 
} catch (e) {} 

心中已經修正也以app.scss的SCSS路徑：

@import "node_modules/bootstrap/scss/bootstrap"; 

現在的問題是，當我在運行npm run dev後加載應用程序時，導航欄被摺疊...就好像它在移動設備上一樣，但我正在桌面上進行測試。

現在它變得更加怪異，因爲如果我從Bootstrap CDN中包含bootstrap.min.css，那麼它工作正常。

雖然我不想這樣做，但顯然我可能最終不得不去做，因爲我不知道問題是什麼。

我試過各種各樣的東西，如註釋掉我所有的自定義CSS，Javascript，重新安裝node_modules多次，等等。我迷失在這一點上。

編輯：我也嘗試使用默認的Bootstrap導航欄時，使用我的app.css文件，它仍然無法正常工作。再說一次，如果我使用CDN代替，工作正常。

Answer 1

@Jake，我的猜測是你得到bootstrap4.0.0-beta並嘗試使用與bootstrap4.0.0-alpha.6相關的標記和類。

如果你卸載bootstrap並運行npm install bootstrap@4.0.0-alpha.6--save --save-exact，你的代碼應該可以工作。

OR

您可以使用此代碼爲您的導航欄在你當前的項目，看看它是否工作正常。

<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>