2017-11-22 1 views
1

Ich verwende ng Bootstrap in meinem Projekt. Alles, was ich dabei mache, ist ein Modal zu öffnen. Ich las eine similar thread, aber dort Bootstrap CSS wurde nicht enthalten.Angular + ng Bootstrap Modal nicht angezeigt

Ich folge this Beispiel.

Wenn ich auf die Schaltfläche klicke, um das Modal zu öffnen, wird Modal im DOM angehängt (sichtbar, wenn es mit dem Dev-Tool überprüft wird), aber es ist nicht auf dem Bildschirm sichtbar.

Ich habe enthalten Bootstrap-CSS in meiner .angular-cli.json als

"styles": [ 
     "styles.css", 
     "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
     ], 

Bootstrap CSS ist auch sichtbar in styles.bundle.js wenn Seitenquelle betrachtet wird.

Bearbeiten 1: Bei der Überprüfung, für NGB-Modal-Fenster wurde die Deckkraft auf 0 gesetzt. Wenn ich es auf 1 gesetzt, wurde Popup sichtbar. Die Position des Popups ist jedoch nicht zentriert. Es wird nach oben gezogen. Bitte beachten Sie das Bild:

ng bootstrap modal pulled to the top

+0

ich denke, json kann nicht lesen ""/" – Ananda

+0

Bootstrap ist in styles.bundle.js sichtbar, was bedeutet, json hat es gelesen. – Shrinivas

+0

Ich glaube nicht, dass dies mit Ihrem Problem zusammenhängt, aber Sie sollten möglicherweise die Reihenfolge ändern, in der Sie Ihre Stile importieren. (styles.css nach Bootstrap.) Der Grund dafür ist, dass Ihre Dateien in der Reihenfolge kompiliert und geliefert werden, die Sie in Ihrer angular-cli-Datei aufgelistet haben. Wenn Sie also Ihren eigenen Stil für eine Bootstrap-Klasse angeben, werden Sie feststellen, dass bootstrap.min.css den in styles.css angegebenen Stil überschreibt. – Simon

Antwort

1

Sie in css

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css'); 
in 'styles.css' 

in einigen Fällen enthalten kann NGX-Bootstrap nicht genau funktioniert wie in Winkel 2/4 erwartet.

+0

Erprobtes Importieren von bootstrap.min.css. Kein Glück! – Shrinivas

+0

haben Sie in Ordner, dass CSS verfügbar? –