Angular - Bootstrap scheint nicht zu funktionieren

[Tabula_Rasa]

Hallo,

ich habe Bootstrap ordnungsgemäß installiert. Mit folgendem Code versuchte ich zwei Komponenten in eine Reihe zu bringen:

<div class="container">
<div class="row">
<div class="col-md-5">
<app-recipe-list></app-recipe-list>
</div>
<div class="col-md-7">
<app-recipe-detail></app-recipe-detail>
</div>
</div>
</div>

Der Code liegt in der recipes.component.html-Datei, den ich im app.component.html eingefügt habe :

<app-recipes></app-recipes>

Der Inhalt von app-recipe-list und app-recipe-detail:

app-recipe-list works!

app-recipe-detail works!

Das Problem ist nun, dass die Inhalte nicht in einer Reihe liegen.

Edit: btn btn-primary und andere Klassen scheinen zu funktionieren

 

[Tabula_Rasa]

Laut https://v4-alpha.getbootstrap.com/layout/grid/ ist col-xl für Screens >=1200 px, aber col-md scheint nur zu funktionieren... Woran könnte es liegen?

 

[Tronjer]

K.A. wie du Bootstrap 4 installiert hast, aber beim Übergang von der Alpha zur Beta gab es ein paar breaking changes bei den Klassennnamen.

 

[Tabula_Rasa]

K.A. wie du Bootstrap 4 installiert hast, aber beim Übergang von der Alpha zur Beta gab es ein paar breaking changes bei den Klassennnamen.

Mit Microsoft Visual Studios Code komme ich gar nicht klar.Es scheint als würde Bootstrap gar nicht funktionieren. Ich habe mir jetzt Webstorm (Trial-Version) besorgt. Alles klappt bestens. Nur ist das Problem, dass ich mit den Columns nicht mehr zurechtkomme. Col-xl- funktioniert nicht, obwohl mein Bildschirm eine Auflösung von 1920x1080px hat, aber dafür md - das verwirrt mich ziemlich.

Ich habe Bootstrap V.3.3.7 via npm installiert und den Pfad ins Array eingetragen in angular-cli.json.

 

[Tronjer]

Ich habe Bootstrap V.3.3.7 via npm installiert und den Pfad ins Array eingetragen in angular-cli.json.

col-xl ist neu in Bootstrap 4, in BS 3.x gab es das nicht.

Außerdem ist die Installation via npm keine gute Idee, weil du lediglich das CSS, nicht aber die JS-Komponenten installieren solltest. Die bauen nämlich auf jQuery auf.

Das Stylesheet kannst du per CDN entweder in der index.html verlinken oder in die styles.css importieren. Solltest du zusätzlich Bootstrap-Komponenten verwenden wollen, dann nimm dafür die Angular-Version.
http://valor-software.com/ngx-bootstrap

 

[Tabula_Rasa]

col-xl ist neu in Bootstrap 4, in BS 3.x gab es das nicht.

Außerdem ist die Installation via npm keine gute Idee, weil du lediglich das CSS, nicht aber die JS-Komponenten installieren solltest. Die bauen nämlich auf jQuery auf.

Das Stylesheet kannst du per CDN entweder in der index.html verlinken oder in die styles.css importieren. Solltest du zusätzlich Bootstrap-Komponenten verwenden wollen, dann nimm dafür die Angular-Version.
http://valor-software.com/ngx-bootstrap

Das erklärt einiges! Ältere Fragen habem sich damit auch geklärt, danke! Was passiert mit den Js-Komponenten? Stört es Angular, wenn ich zusätzlich JQuery benutze?

 

[Tronjer]

Die JS-Komponenten blähen das Bundle unnötig. Aber solange du sie nicht verwendest, stören sie auch nicht.

Prinzipiell sollte die gleichzeitige Verwendung von Angular und jQuery möglichst vermieden werden. Schon alleine weil der Ansatz beider Frameworks völlig unterschiedlich ist. Bei jQuery adressiert man DOM-Elemente à la $('#foo'); bei Angular arbeitet man mit Objekten und überlässt das DOM dem Framework. Alles was jQuery daran manipuliert, wird von Angular nicht erkannt und kann unter Umständen zu Konflikten führen.