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.
Antworten:
Fügen Sie Ihre eigene Klasse hinzu, z. B.: <div class="sidebar right"></div>Mit dem CSS als
.sidebar.right {
float:right
} 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.
!importantist, dass Sie es in Zukunft nie wieder überschreiben können.
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
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:
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 .
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.
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/
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.
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
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