Bootstrap (CSS) überschreiben?

[Dsimon24]

Hallo!

Ich habe folgende Ausgangssituation - siehe Bild im Anhang.

Da möchte ich die CSS-Daten, die sich in Bootstrap (CSS üder CDN
eingebunden) befinden, überschreiben. EIne Änderung wird
jedoch nicht angenommen.


Meine .html sieht wie folgt aus (Abschnitt):

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/starter-template.css" rel="stylesheet">
    <link href="css/my-individual-style.css" rel="stylesheet">

Die Anpassungen habe ich in die my-individual-style.css gepackt:

@media (min-width: 1200px)
.container {
    width: 970px;
}
@media (min-width: 992px)
.container {
    width: 970px;
}
@media (min-width: 768px)
.container {
    width: 750px;
}

Ich verstehe nun nicht, warum noch immer CSS aus der Bootstrap (CDN) dominiert.

Vielleicht kann mir dazu einer einen Rat geben?

Grüße, David

 

[Tronjer]

Möglicher Weise ist die Klasse .container in der bootstrap.css tiefer ausdifferenziert. Näheres verraten dir die Dev Tools deines Browsers.

 

[Arne Drews]

Hallo,

Wenn ich mir den Screenshot ansehe, frage ich mich, welche Änderung Du erkennen willst?
Scheinbar greift die min-width:992px Query, in der Du exakt dasselbe definierst, wie es über die grid.less gemacht wird.

Gruß Arne

 

[Dsimon24]

Hallo,

Wenn ich mir den Screenshot ansehe, frage ich mich, welche Änderung Du erkennen willst?
Scheinbar greift die min-width:992px Query, in der Du exakt dasselbe definierst, wie es über die grid.less gemacht wird.

Gruß Arne

Ich habe in der CSS -> Zeile 3 den Wert der px geändert.

 

[Arne Drews]

Ja, aber das ist die Rule für min-width:1200px;
In Deinem Screenshot scheint die Rule aber für min-width:992px; zu greifen.
In der hast Du dasselbe stehen, wie in der grid.less.

Gruß Arne

 

[Tronjer]

Falls die specifities der bootstrap.css nicht höher sind und dem geposteten Code noch Curly Braces für die Media Queries hinzugefügt werden, sollte .container eine width von 750px haben. Zeile 11 überschreibt 3 und 7.

 

[Tronjer]

In der hast Du dasselbe stehen, wie in der grid.less

Wer verwendet denn noch LESS? :(

 

[Arne Drews]

Stimmt... Hab die Reihenfolge nicht berücksichtigt.

Wer verwendet denn noch LESS? :(

siehe Screenshot aus #1