Winkel-4 Bootstrap-4 nicht korrekt wiedergegeben

Habe ich einen frisch erstellten Winkel-4 CLI-app mit den folgenden Paketen installiert:

npm install bootstrap@4.0.0-beta jquery tether popper.js --save

.Winkel-cli.json-Extraktion:

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/popper.js/dist/umd/popper.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"

],

Mit diesem setup habe ich eine Navigations-Komponente mit dem html-code aus die offizielle Bootstrap-Seite 4 das ist nicht korrekt wiedergegeben:
Winkel-4 Bootstrap-4 nicht korrekt wiedergegeben
Es hat eine toggle-Taste auch wenn kein browser im full-screen-Modus, Hintergrundfarbe fehlt, "Navbar" und toggler sind vertauscht.

Aber es funktioniert perfekt wenn ich Bootstrap-4 CDN. Andere Stile, außer für die navbar funktionieren wie erwartet, in beiden Fällen.

So, was mache ich falsch bei der Arbeit mit Bootstrap lokal installiert?

  • Haben Sie sah bootstrap-4 navbar-API, es hat sich drastisch verändert.
  • Sie sind mit Bootrap 4 beta, aber die Verknüpfung der alpha-docs.
  • Danke, du hast Recht! Wie könnte ich verpasst,!
InformationsquelleAutor mikebrsv | 2017-08-14
  1. 3

    Es klingt, es ist eine wichtige änderung mit css in 4.0.0-Beta.

    https://github.com/bootstrap-vue/bootstrap-vue/issues/812

    Nur ein downgrade der bootstrap-version:

    npm installieren [email protected] -speichern Sie

    Hinweis: die CDN, die Sie versuchte mit apha.6, warum es funktioniert 🙂

    InformationsquelleAutor Jows
  2. 4

    Es geschieht, da die bootstrap-version Inkompatibilität zu umgehen, in Stilen.css, fügen Sie diese Zeile:

    @import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
    InformationsquelleAutor Karan
  3. 0

    Verwenden diese config in eckig.json. Beachten Sie, wie wir Sie verwenden node_modules/popper.js/dist/umd/popper.min.js. Dies scheint zu funktionieren.

    "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

    Alle die besten!!!

    InformationsquelleAutor Vishal Seshagiri
Schreibe einen Kommentar