Bootstrap lässt sich nicht überschreiben?

Hey,
Ich habe das Problem das folgender Code im css:

@media (min-width: 992px) {

 .navbar-expand-lg {

  -ms-flex-flow: row nowrap;

  flex-flow: row nowrap;

  -ms-flex-pack: start;

  justify-content: flex-start;

 }

Schon aus meiner DAtei die das bootstrap css überschreiben soll genommen wird. Wenn ich den Wert 992 aber zu einem anderen Ändere nicht mehr. Würde aber gerne den Wert aus meiner CSS-datei heraus überschreiben. Und damit das Hamburger Menü immer anzeigen und nicht nur für kleine Bildschirme
Danke :)

Answer 1

[regex9]

Um die CSS-Properties dieses Selektors zu überschreiben, musst du nach dem Bootstrap-CSS einen mindestens gleichrangigen CSS-Selektor kreieren. Dann kannst du den Properties ihre Standardwerte (o.ä.) zuordnen.

@media (min-width: 992px) {
  .navbar-expand-lg {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -ms-flex-pack: start;
    justify-content: normal;
  }
}

Auf MDN kannst du zu den jeweiligen CSS-Properties die jeweiligen Standardwerte nachschlagen.

Dazu noch ein Rat, da verschiedene Quellen in diesem Zuge oft die !important-Regel anführen: Beim Überschreiben würde ich dir raten, sie nach Möglichkeit nicht zu verwenden (wenn es vermeidbar ist). Da sie die höchste Spezifität herstellt, lässt sie sich nur schwer wieder überschreiben, falls das an bestimmter Stelle notwendig sein sollte. Es regt also mehr dazu an, das eigene CSS langsam komplizierter werden zu lassen.

Würde aber gerne den Wert aus meiner CSS-datei heraus überschreiben.

Dieser eine Wert (min-width des Media Queries) lässt sich nicht überschreiben. Du musst, wie schon von mir geschrieben, den gesamten Selektor überschreiben, indem du ihn neu definierst.

Eine andere Option hättest du womöglich, wenn du mit LESS oder SASS / SCSS arbeitest und Bootstrap an der Stelle (für min-width) eine Variable setzt. Dann könntest du diese überschreiben und somit sorgen, dass der Media Query bspw. für eine min-width 500 (oder irgendeinen anderen Wert) gilt. Zu beachten wäre dabei aber auch, dass so eine Änderung noch viele weitere Stellen beeinflussen / verändern würde (eben da, wo die Variable überall eingesetzt wird).

Und damit das Hamburger Menü immer anzeigen und nicht nur für kleine Bildschirme

Der von dir gezeigte Selektor hat damit allerdings wohl nicht wirklich etwas zutun.

Answer 2

[osion]

Die Regel ist ganz einfach:

1. !important hat immer mehr Wert als der gleiche Befehl ohne !important
2. Das letzte !important überschreibt die betreffende Werte allen vorherigen !important

Ich gehe davon aus, dass deine CSS-Style-Datei als letztes eingebunden wird?

@media (min-width: 992px) ...min-width sagt ab welcher width die Regel @media gilt.

Comments

[regex9]

Die !important-Regel an dieser Stelle einzusetzen, wäre vollkommen ohne Not. Ein Selektor mit gleichrangiger Spezifität nach dem Bootstrap-CSS reicht schon aus, um Werte wieder überschreiben zu können.

[osion]

@regex9

Ich sehe, dass ich die Regel nicht vollständig aufgeschrieben habe ^^