• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bootstrap (CSS) überschreiben?

Dsimon24

Mitglied
cssproblemyv8kjgam0d.png
3t6jk
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):
HTML:
    <!-- 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:

HTML:
@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
 
Werbung:
Möglicher Weise ist die Klasse .container in der bootstrap.css tiefer ausdifferenziert. Näheres verraten dir die Dev Tools deines Browsers.
 
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
 
Werbung:
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
 
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.
 
Werbung:
Zurück
Oben