MediaQuery Overrides funktionieren nicht

[Jan-Frederik Stieler]

Hallo,
ich verwende Bootstrap in einem Projekt und habe das Template, mit diesem überschreibe ich einige Dinge in Bootstrap, in einer eigenen Datei ausgelagert. Nun müsste ich noch einige Dinge in dem MediaQueries anpassen. Leider werden die in der Templatedatei nicht geladen. In Chrome werden nach wie vor die Daten aus der Bootstrap.css geladen. Die Template CSS-Datei ist natürlich nach dem Bootstrap Framework eingebunden.
Irgendjemand eine Idee? Die normalen Overrides funktionieren ja auch.
Gelten die normalen Überschreibungsregeln für MediaQueries nicht?

Viele Grüße

 

[SpiceLab]

Hast du ein konkretes Fallbeispiel zur Hand?

 

[Jan-Frederik Stieler]

Hi,
hab dir hier mal in Bezug auf die Klasse .container ein Beispiel erstellt: http://jsbin.com/kamima/4/edit
Wenn du den grauen Balken mit dem Inspektor mal analysierst dann werden die Breiten der Bootstrap.css verwendet und nicht die der eingetragenen CSS.
Dies entspricht auch meinem lokalen Verhalten.

Kann gut sein das ich heir etwas missverstehe im Verhalten von Media Queries.


Grüße

 

[ComFreek]

Hallo Jan,

erst einmal ist Folgendes nicht möglich:

.template {
  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
    .container {
      width: 50px;
    }
  }
}

Mit normalem CSS kannst du keine Dinge verschachteln.
Deswegen muss es so lauten:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    width: 50px;
  }
}

Selbst dann greift diese Regel nicht. Dies liegt wahrscheinlich daran, dass spezifischere Regeln von Bootstrap (hier ist ein schöner Artikel) existieren. Ein !important verdeutlicht diese Situation:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    width: 50px !important;
  }
}

Siehe: http://jsbin.com/taqataxa/2/

PS: !important sollte generell nicht verwendet werden.

 

[SpiceLab]

Selbst dann greift diese Regel nicht. Dies liegt wahrscheinlich daran, dass spezifischere Regeln von Bootstrap (hier ist ein schöner Artikel) existieren.

Mit einem spezifischeren Selektor greifen hier die angewandten width-Regeln

.container .col-md-12 {...}

oder

.container .show-grid {...}

Oder den Selektor ohne die vorangestellte Klasse .container benennen, die offensichtlich im Bootstrap-CSS nicht enthalten ist

 

[Jan-Frederik Stieler]

Hi,
ja das mit dem .template war ein Fehler. Da hab ich Less und CSS gemischt.
Danke für den Artikel.

Das Beispiel auf JSBin war ja jetzt nur ein Beispiel. Ich hab das Problem faktisch mit allen Bootstrap-Klassen innererhalb der MediaQueries.
Das .showgrid habe ich in JSBin nur um das Grid ohne Inhalt darstellen zu können.

Ich frag mich grad nur wie ich mit diesem Problem vernünftig mit Boostrap responsive Websites entwickeln soll?
Außer ich überschreibe eben alles mit einer Templateklasse. Das ist ja grad bei Verwendung von Less nicht weiter schwierig über ein Mixin zu realisieren.
Oder gehen die davon aus das man die Bootstrap.css direkt bearbeitet und nicht per Template-Datei arbeitet?

Das ist jetzt die erste Webseite welche auch responsive in den produktiven Einsatz gehen soll. Bootstrap habe ich schon öfters verwendet.

Grüße

 

[SpiceLab]

Naja, wenn du tatsächlich das Bootstrap-CSS an gewissen Stellen überschreiben willst, kennst du ja nun anhand meiner letzten Antwort eine mögliche Vorgehensweise, ohne das Bootstrap-CSS anzufassen.