Kłopoty z przesłonięciem Bootstrap CSS

Question

Przeszukałem sieć, aby przesłonić kod CSS bootstraps, ale muszę go jeszcze sprawować. Próbuję zmienić domyślny kolor navbar bez edytowania pliku bootstrap.css.
Próbowałem wprowadzenie następujących w głowie po załadowaniu 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); 
} 

To nie działa tak próbowałem wprowadzenie go w jego własnym pliku CSS, a następnie ładuje tę stylów tak:

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"> 

Kiedy to nie pomogło Próbowałem dodanie niestandardowej klasy do elementu

_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); 
} 

Am I robienie czegoś złego? Naprawdę chciałbym nauczyć się, jak to zrobić w odpowiedni sposób, jeśli to możliwe.

Answer 1

Aby przeciążyć css, musisz później znaleźć się w kodzie lub bardziej szczegółowo niż css, który próbujesz przeciążyć.

może być możliwe tylko dodać body przed .navbar-inner tak, że stanowi body .navbar-inner tak, że jest bardziej szczegółowy, a może div.navbar-inner, najlepiej byłoby mieć identyfikator tam gdzieś.

Jeśli wybierzesz go tak dokładnie, jak jest w bootstrap.css, to myślę, że css nie jest ładowany po bootstrapie, jak myślisz. Sprawdź, co zostało wybrane za pomocą narzędzia takiego jak narzędzie programistyczne Chromes lub firebug przeglądarki Firefox.

Answer 2

Jest literówka w CSS:

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

myślę, że powinno być:

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

Jeśli wpiszesz błąd w CSS, jego zatrzymanie interpretacji resztę, więc nie ma obejścia dla ty.

Answer 3

Właśnie spędziłem większość dnia próbuje zmienić kolor paska nawigacyjnego: [

Myślę, że problem jest .navbar-odwrotny

Twój oddzielny plik .css powinien zawierać coś takiego wówczas kolor zmieni :

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

Answer 4

można zastąpić wartości domyślne bootstrap, zmieniając zmienne LESS.

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

// pasek nawigacyjny

• @navbarBackground: @ Color1;
• @navbarBackgroundHighlight: @ Color1;
• @navbarBrandColor: #FFFFFF;
• @navbarLinkColor: #FFFFFF;
• @navbarLinkColorHover: #FFFFFF;
• @navbarLinkColorActive: #FFFFFF;
• @navbarInverseBackground: #FFFFFF;
• @navbarInverseBackgroundHighlight: #FFFFFF;
• @navbarInverseBorder: #FFFFFF;
• @navbarInverseLinkColorHover: @ Color7;
• @navbarInverseLinkColorActive: @ Color11;
• @navbarInverseLinkColor: @ Color1;

Answer 5

Czy próbowałeś dodać znacznik !important na każdej linii CSS, aby nakazać elementowi zastąpić bootstrap?

coś takiego:

.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; 
} 

nie

Zazwyczaj najlepszym sposobem, aby to zrobić, ale myślę, że to powinno działać.

Answer 6

Rozwiąż swój problem, kopiując klasę CSS i zmieniając jej nazwę. Następnie użyć tej klasy :)

Znam jego Wzmocnione ale wyglądają conajmniej działa

Przykład:

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