Ich habe ein nerviges "Problem" bei meinem gefundenWebsite mit Twitter Bootstrap. Ich habe einen Hauptcontainer, der die standardmäßige .container-Bootstrap-Klasse verwendet, und ich habe in meiner benutzerdefinierten CSS-Datei eine bestimmte Breite angegeben. Wenn ich jedoch die Datei bootstrap-responsive.css in mein HTML-Dokument einfügte, scheint es die Breite meines Containers zu überschreiben.
Dies ist die Reihenfolge meiner CSS-Dateien:
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/Site.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
Aus welchem Grund wird in der responsiven CSS-Datei eine Breite angegeben? Gibt es eine einfache Möglichkeit, das Problem zu beheben, ohne die Bootstrap-responsive.css manuell zu bearbeiten (was meiner Meinung nach eine schlechte Idee wäre)
Ich brauche die bootstrap-responsive.css, um meine Website mobil / tabletfreundlich zu machen.
Antworten:
1 für die Antwort № 1Es ist eine minimale Breite in Bootstrap erforderlich, um die richtige Struktur aufrechtzuerhalten. Andererseits können Sie einfach Ihren CSS-Code eingeben NACH Bootstrap reagiert, so dass Ihre Regel die Bootstrap-Regel überschreibt.
0 für die Antwort № 2
Persönlich neige ich dazu, meine eigene Gewohnheit zu ladenStylesheet nach allen anderen CSS-Dateien. Dann müssen Sie jedoch sicherstellen, dass Sie keine Standardwerte für globale Eigenschaften ... oder Layout-bezogene Eigenschaften ändern, d. H .: .Container
Im Allgemeinen wird diese Klasse mehrmals verwendetund kann für verschiedene Geräte und Situationen angepasst werden. Ich empfehle daher, solche Werte in bootstrap-responsive.css zu ändern. Dies ist die Datei, die alle Ihre Medienabfragen enthält.
Andernfalls überschreiben Sie die gewünschte Reaktionszeit. Dies kann zu CSS-Eigenschaften mit wichtigen Ausnahmen führen. Dies sollte auf jeden Fall vermieden werden.
0 für die Antwort № 3
Wenn Sie CSS verwenden, hat die letzte Instanz einer Stilinformation Vorrang. Wenn ich beispielsweise auf zwei verschiedene Stylesheets verlinke, hat das zweite Vorrang, wenn ein Konflikt vorliegt ...
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
In diesem Beispiel, wenn die.Das Containerelement wird in der Datei style.css geändert, die Stylingdaten in style.css haben nur dann Priorität, wenn ein Konflikt vorliegt. Dieser Effekt ähnelt dem Vorhandensein von sowohl externem als auch Inline-CSS in einem einzelnen HTML-Dokument. Hier ist ein jsFiddle um zu zeigen. Hier sehen Sie, dass der Inline-Stil Vorrang hatte und die Farbe des Textes orange war, während der Hintergrund schwarz gehalten wurde.