So überschreiben Sie das Styling in Twitter Bootstrap

128

Wie kann ich die Stile in Twitter Bootstrap überschreiben? Zum Beispiel verwende ich derzeit eine .sidebar-Klasse mit der CSS-Regel 'float: left;' Wie kann ich das so ändern, dass es stattdessen nach rechts geht? Ich verwende HAML und SASS, bin aber relativ neu in der Webentwicklung.

css twitter-bootstrap John
quelle
Siehe auch: stackoverflow.com/questions/8596794/…
Zim

Antworten:

41

Fügen Sie Ihre eigene Klasse hinzu, z. B.: <div class="sidebar right"></div>Mit dem CSS als

.sidebar.right { 
    float:right
}
motoxer4533
quelle
1
Keine gute Praxis: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
Damjan Pavlica
2
@ DamjanPavlica Ehrlich? Sie interessieren sich immer noch für IE 6? Ganz zu schweigen davon, dass Bootstrap meiner Meinung nach eine Verkettung verwendet.
Błażej Michalik
233

Alle diese Tipps funktionieren, aber eine einfachere Möglichkeit besteht darin, Ihr Stylesheet nach den Bootstrap-Styles einzufügen.

Wenn Sie Ihr css ( site-specific.css) nach Bootstrap ( bootstrap.css) einfügen , können Sie Regeln überschreiben, indem Sie sie neu definieren.

Zum Beispiel, wenn Sie auf diese Weise CSS in Ihr Programm aufnehmen <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

Sie können die Seitenleiste einfach nach rechts verschieben, indem Sie (in Ihre site-specific.cssDatei) schreiben :

.sidebar {
    float: right;
}

Verzeihen Sie den Mangel an HAML und SASS, ich kenne sie nicht gut genug, um Tutorials darin zu schreiben.

citelao
quelle
7
@ClaudiuConstantin Ich sehe keinen Grund warum nicht. Als Faustregel gilt, dass der zweite Stil immer den ersten übertrumpft, wenn zwei die gleiche Spezifität aufweisen. Solange Ihr Stil danach kommt, wird er außer Kraft gesetzt.
Citelao
3
@Kreker Das hat wahrscheinlich viel mit Spezifität zu tun. Sie können es bis lesen hier (alter Artikel), aber im Grunde .sidebar.rightsind spezifischer als .sidebar. Das ist wahrscheinlich das Problem. Verwenden Sie den Webinspektor, um herauszufinden, was ihn überschreibt.
Citelao
2
@Kreker yup, das ist die Idee. Das Problem dabei !importantist, dass Sie es in Zukunft nie wieder überschreiben können.
Citelao
5
Meine Site.csswird gebündelt und aufgeführt in Bundle.configund körperlich gemacht , nachdem bootstrap.css aber die Stile sind noch nicht außer Kraft gesetzt. Ich musste die site.cssReferenz aus dem Modernizer-Bundle nehmen und sie manuell nach dem bootstrap.css(und drücken Sie Strg + F5 einmal beim Debuggen, um den Cache zu
leeren
1
Dies könnte funktionieren, wäre jedoch keine bewährte Methode für die Produktion. Laden Sie 1 Stylesheet pro Site, es sei denn, es gibt einen wichtigen Grund, dies nicht zu tun. #sitespeed
Ben Racicot
58

Die Antwort darauf lautet CSS-Spezifität. Sie müssen in Ihrem CSS "spezifischer" sein, damit es die Bootstrap-CSS-Eigenschaften überschreiben kann.

Zum Beispiel haben Sie hier einen Beispielcode für ein Bootstrap-Menü:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

Hier müssen Sie sich an die Hierarchie der Spezifität erinnern. Es geht so:

  • Geben Sie ein Element mit einer ID von 100 Punkten an
  • Geben Sie ein Element mit einer Klasse von 10 Punkten an
  • Geben Sie einem einfachen Element einen einzelnen 1 Punkt

Also, für die oben genannten, wenn Ihr CSS so etwas hat:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

Selbst wenn Sie das .navbar aAfter definiert haben, wird .navbar ul li aes immer noch mit einer roten Farbe anstelle einer grünen Farbe überschrieben, da die Spezifität größer ist (13 Punkte).

Alles, was Sie tun müssen, ist, die Punkte für das Element, für das Sie das CSS ändern möchten, über das Inspect-Element in Ihrem Browser zu berechnen. Hier hat bootstrap sein CSS für das Element als angegeben

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

Selbst wenn Ihr CSS geladen wird, wird es nach bootstrap.css geladen, das die folgende Zeile enthält:

.navbar-nav li a {
    color: red;
}

Es wird immer noch als # 999 gerendert. Um dies zu lösen, hat Bootstrap 22 Punkte (berechnen Sie es selbst). Wir brauchen also nur etwas mehr. Daher habe ich den Elementen benutzerdefinierte IDs hinzugefügt, z. B. Home-Menü-Container und Home-Menü. Jetzt funktioniert das folgende CSS:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

Getan.

Sie können auf diesen MDN-Link verweisen .

kaizer1v
quelle
1
Was ist, wenn sie gebunden sind?
Verwirrt
2
Es spielt keine Rolle, zum Beispiel bedeutet '.abc.xyz', dass es ein Element mit den Klassen 'abc' und 'xyz' gibt - es wird immer noch als einzelnes Element mit einer Klasse verwendet. Also 10 Punkte. Gleiches gilt für eine ID.
kaizer1v
1
Gut geschrieben! Danke dir!
GobSmack
1
Das war der Trick für mich. Ich hatte Probleme, den blockquoteStil im Bootstrap-CSS zu überschreiben. Seltsamerweise war es für normale Blockzitate falsch, sah aber richtig aus und <ul> innerhalb eines Blockzitats. Der Schlüssel war, mein CSS zu aktualisieren blockquote p, was genügend Priorität gab. Das <ul> tat dies für den anderen Abschnitt der Seite.
Adam Wuerl
20

Sie können eine CSS-Klasse überschreiben, indem Sie sie "spezifischer" machen.

Sie gehen in den HTML-Baum und geben übergeordnete Elemente an:

div.sidebar { ... } ist spezifischer als .sidebar { ... }

Sie können bis zum KÖRPER gehen, wenn Sie müssen:

body .sidebar { ... } wird praktisch alles überschreiben.

Siehe diese praktische Anleitung: http://css-tricks.com/855-specifics-on-css-specificity/

Diodeus - James MacFarlane
quelle
Dies ist eigentlich die beste Antwort
CodyBugstein
9

Sie können einfach sicherstellen, dass Ihre CSS-Datei NACH boostrap.css analysiert wird, wie folgt:

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/myFile.css" rel="stylesheet">

Gothburz
quelle
6

Wenn Sie CSS im Bootstrap überschreiben möchten, verwenden Sie! Wichtig

Angenommen, hier ist die Seitenkopfklasse in Bootstrap mit einem Rand von 40 Pixel oben. Mein Client mag sie nicht und möchte, dass sie oben 15 und unten nur 10 beträgt

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

Also habe ich in meiner site.css-Datei eine Klasse mit demselben Namen hinzugefügt

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

Beachten Sie das! Wichtige mit meinem Rand, der den Rand des Randes der Bootstarp-Seitenkopf-Klassenklasse überschreibt.

Ali Adravi
quelle
genial! Das ist was ich will. Danke
Gisway
2
Beachten Sie, dass die Verwendung von! Important ein Anti-Pattern ist. Lesen Sie hier mehr: james.padolsey.com/css/dont-use-important
Mayatron
3

Kam so spät rüber, aber ich denke, es könnte eine andere Antwort gebrauchen.

Wenn Sie sass verwenden, können Sie die Variablen tatsächlich ändern, bevor Sie Bootstrap importieren. http://twitter.github.com/bootstrap/customize.html#variables

Ändern Sie einen von ihnen, wie zum Beispiel:

$bodyBackground: red;
@import "bootstrap";

Wenn für das, was Sie ändern möchten, keine Variable verfügbar ist, können Sie alternativ die Stile überschreiben oder eigene hinzufügen.

Sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

Beachten Sie auch Folgendes : Richtige SCSS-Asset-Struktur in Rails

AJcodez
quelle
2

Ich weiß, dass dies eine alte Frage ist, aber dennoch bin ich auf ein ähnliches Problem gestoßen und habe festgestellt, dass mein "nicht funktionierender" CSS-Code in meiner bootstrapOverload.cssDatei nach dem geschrieben wurde media queries. Als ich es über Medienabfragen verschob, fing es an zu funktionieren.

Nur für den Fall, dass jemand anderes vor dem gleichen Problem steht

md1hunox
quelle