Bootstrap 4 Navbar Collapsed für Mobile beim Laden der Seite (Laravel/Laravel-Mix)

Question

Nun, ich bin nicht wirklich sicher, an dieser Stelle zu drehen, weil dies absolut keinen Sinn für mich macht.

Ich benutze die neueste Version von Laravel und Laravel Mix, die miteinander verwandt sein können oder nicht.

Ich habe aktualisiert Laravel die neueste Bootstrap 4 Alpha mit folgenden Abhängigkeiten zu verwenden:

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

Alles ist hier die richtigen Versionen.

Ich habe meine bootstrap.js aktualisiert, um die richtige Bootstrap-Modul und die neu Module umfassen erforderlich:

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

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

I'v auch die SCSS Weg in app.scss korrigiert:

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

Nun ist das Problem, dass, wenn ich die App nach dem Ausführen npm run dev laden die Navbar ist kollabiert ... als ob es auf dem Handy war, aber ich teste auf einem Desktop.

Jetzt wird es noch seltsamer, denn wenn ich bootstrap.min.css aus dem Bootstrap CDN einschließe, dann funktioniert es gut.

Ich möchte das zwar nicht tun, aber klar muss ich am Ende, weil ich keine Ahnung habe, was das Problem ist.

Ich habe verschiedene Dinge ausprobiert, wie das Auskommentieren aller benutzerdefinierten CSS, Javascript, node_modules mehrfach neu installieren usw. Ich bin an dieser Stelle verloren.

bearbeiten: Ich habe auch versucht, die Standard Bootstrap Navbar bei der Verwendung meiner app.css Datei und es funktioniert immer noch nicht. Auch hier funktioniert es gut, wenn ich stattdessen das CDN verwende.

Answer 1

@Jake, meine Vermutung ist, Sie erhalten bootstrap4.0.0-beta und versuchen, Markup und Klassen im Zusammenhang mit bootstrap4.0.0-alpha.6 zu verwenden.

Wenn Sie den Bootstrap deinstallieren und npm install bootstrap@4.0.0-alpha.6--save --save-exact ausführen, sollte Ihr Code funktionieren.

ODER

Sie können diesen Code für Ihren navbar in Ihnen aktuelle Projekt verwenden, um festzustellen, ob es korrekt funktioniert.

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