Probleme Überschreiben Bootstrap-CSS

Habe ich im Netz gesucht, nach einer Möglichkeit zu überschreiben bootstraps CSS, aber noch haben Sie Arbeit für mich. Ich versuche, ändern Sie die Standard - navbar Farbe ohne Bearbeitung der bootstrap.css - Datei.
Ich habe versucht, indem Sie den folgenden in den Kopf nach dem laden bootstrap.css:

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

Dieser funktionierte nicht, also habe ich versucht, indem es in seiner eigenen CSS-Datei und dann laden Sie das stylesheet in etwa so:

bootstrapOverload.css

.navbar-inner {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0);
}

_Layout.cshtml

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

Wenn das nicht funktioniert ich habe versucht, das hinzufügen einer benutzerdefinierten Klasse, die element

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

bootstrapOverload.css

.navbar-override {
    background-color: #006633;
    background-image: -mox-linear-gradient(top, #006633, #006633);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633));
    background-image: -webkit-linear-gradient(top, #006633, #006633);
    background-image: -o-linear-gradient(top, #006633, #006633);
    background-image: linear-gradient(to bottom, #006633, #006633);
    border-color: #006633;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0);
}

Mache ich etwas falsch? Ich würde wirklich gerne lernen, wie zu tun es der richtige Weg, wenn möglich.

Zusätzlich zu den Antworten unter diesem link nzwhost.com/article/understanding-css-hierarchy kann helfen
Dies ist sehr ähnlich zu ändern der navbar Farbe in twitter bootstrap 2 0 4, die hat eine sehr umfassende Lösung.

InformationsquelleAutor Jeff | 2012-09-29

  1. 9

    Haben Sie versucht, indem die !important - tag auf jeder CSS-Zeile, um zu sagen, das element zu überschreiben bootstrap?

    Etwas wie dieses:

    .navbar-override {
    background-color: #006633 !important;
    background-image: -moz-linear-gradient(top, #006633, #006633) !important;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important;
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important;
    background-image: -o-linear-gradient(top, #006633, #006633) !important;
    background-image: linear-gradient(to bottom, #006633, #006633) !important;
    border-color: #006633 !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',     endColorstr='#ff006633', GradientType=0) !important;
}

    Regel nicht der beste Weg, dies zu tun, aber ich denke, es sollte funktionieren.

    Perfekt! Dies ist, was ich suchte.

    InformationsquelleAutor MitulP91

  2. 3

    Ist ein Tippfehler in der CSS:

    background-image: -mox-linear-gradient(top, #006633, #006633);

    Ich denke, es sollte sein: 

    background-image: -moz-linear-gradient(top, #006633, #006633);

    Wenn du einen Fehler im CSS, den Anschlag der Interpretation der rest, also kein Vorrang für Sie.

    Genial. Ich wusste es nicht, hielt das rendering nach einem Fehler. Um sicher zu sein habe ich es diesmal richtig kopiert habe ich die css von bootstrap.css in mein eigenes Stylesheet ein und verändert die Farbwerte. Noch kein Glück leider.

    InformationsquelleAutor Mark

  3. 3

    Nur verbrachte die meiste Zeit des Tages versuchen zu ändern der navbar-Farbe : [

    Ich denke, das problem ist .navbar-inverse

    Ihre eigenen .css-Datei sollte so etwas wie dieses, dann wird die Farbe ändern:

    .navbar-inverse .navbar-inner {
background-color: #586214;
background-image: none;
}

    InformationsquelleAutor Willy Nilley

  4. 2

    Überlast css, die Sie benötigen, um entweder später in den code, oder mehrere bestimmte dann die css, die Sie versuchen zu überlasten.

    Kann es möglich sein, fügen Sie einfach body vor .navbar-inner so, dass es Staaten body .navbar-inner nur so, dass es spezifischer ist, oder vielleicht div.navbar-inner, am besten wäre eine id haben da irgendwo.

    Wenn Sie auswählen, wird es so konkret wie in der bootstrap.css, dann denke ich, dass Sie css wird nicht geladen, nachdem der bootstrap als Sie denken. Überprüfen, was ausgewählt ist, mit einem tool wie Chrome tool für die Entwicklung oder Firefox ist firebug.

    In diesem Fall gibt es keine Notwendigkeit, unnötige Selektoren
    Ich habe gerade korrigiert einige Fehler und habe versucht, das hinzufügen Körper, div, und eine id, aber es funktioniert immer noch nicht. Ich auch gelöscht, meinen cache, weil ich nicht wusste ob das hindert mich daran, zu sehen, die Ergebnisse für einige Grund. Wenn ich element untersuchen mit Chrome ist es zu sagen, dass es immer noch mit bootstrap.css, aber wenn ich deaktivieren Sie alle Werte zeigt es die Farbe von meinem Stylesheet. Ich habe mein Stylesheet nach bootstrap.css in meinem code.
    Was Selektors bootstrap.css für Ihr element?

    InformationsquelleAutor Krycke

  5. 1

    können Sie überschreiben die bootstrap-Standardeinstellungen ändern der WENIGER Variablen.

    http://bootstrap.lesscss.ru/less.html

    //Navbar

    • @navbarBackground: @Color1;
    • @navbarBackgroundHighlight: @Color1;
    • @navbarBrandColor: #FFFFFF;
    • @navbarLinkColor: #FFFFFF;
    • @navbarLinkColorHover: #FFFFFF;
    • @navbarLinkColorActive: #FFFFFF;
    • @navbarInverseBackground: #FFFFFF;
    • @navbarInverseBackgroundHighlight: #FFFFFF;
    • @navbarInverseBorder: #FFFFFF;
    • @navbarInverseLinkColorHover: @Color7;
    • @navbarInverseLinkColorActive: @Color11;
    • @navbarInverseLinkColor: @Color1;
    wir sollten auch hinzufügen, dass nach der änderung die less-Dateien werden die css neu kompiliert werden muss (oder interpretiert von lessjs)

    InformationsquelleAutor actraub

  6. 0

    Lösen Ihr Problem durch Kopieren der CSS-Klasse, und benennen Sie es. Dann verwenden Sie diese Klasse 🙂

    Ich weiß, das Verstärkt aber schauen Sie atleast es funktioniert

    Beispiel:

    .drop-down {...}     /* is from bootstrap */
.drop-down-new {...} /* Your new Class that works*/

    InformationsquelleAutor Dxg125

Schreibe einen Kommentar