Problema Anulando Bootstrap CSS

He buscado en la red una manera de anular bootstraps CSS pero aún no lo tengo para mí. Estoy intentando cambiar el color navbar predeterminado sin editar el archivo bootstrap.css.
he intentado poner el siguiente en la cabeza después de cargar bootstrap.css:Problema Anulando 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); 
}

esto no funciona, así que traté de ponerlo en su propio archivo CSS y luego cargar de que hoja de estilo, así:

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

Cuando eso no funcionó He intentado añadir una clase personalizada al elemento

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

I Am haciendo algo mal? Realmente me encantaría aprender a hacer esto de la manera correcta si es posible.

Fuente

2012-09-29 Jeff

Además de las respuestas a continuación este enlace http://www.nzwhost.com/article/understanding-css-hierarchy puede ayudar –

Esto es muy similar a [cambiar el color de la barra de navegación en twitter bootstrap 2 0 4] (http://stackoverflow.com/questions/11196638/change-navbar-color-in-twitter-bootstrap- 2-0-4) que tiene una solución muy completa. – everette

Para sobrecargar css necesita estar más adelante en el código, o más específico que el CSS que está tratando de sobrecargar.

Puede ser posible que sólo tiene que añadir body frente a .navbar-inner de manera que diga body .navbar-inner simplemente para que sea más específica, o tal vez div.navbar-inner, lo mejor sería tener un id allí en alguna parte.

Si lo selecciona como específico en el bootstrap.css, entonces creo que css no se carga después de la rutina de arranque como cree. Verifique qué se selecciona con una herramienta como la herramienta de desarrollo Chromes o el Firebug de Firefox.

Fuente

2012-09-29 23:29:22 Krycke

En este caso, no hay necesidad de agregar selectores innecesarios –

Acabo de corregir algunos errores e intenté agregar cuerpo, div y una identificación pero todavía no funciona. También eliminé mi caché porque no sabía si eso me impedía ver los resultados por algún motivo. Cuando inspecciono el elemento con Chrome, sigo diciendo que todavía está usando bootstrap.css, pero cuando desactivo todos los valores, muestra el color de mi hoja de estilos. Tengo mi hoja de estilo colocada después de bootstrap.css en mi código. – Jeff

¿Qué selector está usando 'bootstrap.css' para su elemento? – Krycke

Hay un error tipográfico en el CSS:

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

Creo que debe ser:

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

Si escribe un error en el CSS, su parada interpretar el resto, así que no hay reemplazo para tú.

Fuente

2012-09-29 23:29:42 Mark

Impresionante. No sabía que dejó de renderizar después de un error. Para estar seguro de que lo hice bien esta vez, copié el CSS de bootstrap.css en mi propia hoja de estilos y cambié los valores de color. Todavía no hay suerte, lamentablemente. – Jeff

Acabamos de pasar la mayor parte del día tratando de cambiar el color de barra de navegación: [

Creo que el problema es .navbar-inversa

Su archivo .css independiente debería incluir algo como esto, entonces el color cambiará :

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

Fuente

2013-03-16 06:12:28

puede anular los valores predeterminados de arranque cambiando las variables LESS.

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

// barra de navegación

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

Fuente

2013-08-18 15:44:51 actraub

también deberíamos agregar que después de cambiar menos archivos el css debe ser recompilado (o interpretado por lessjs) – Mangiucugna

¿Ha intentado agregar la etiqueta !important en cada línea de CSS para indicar al elemento que sobrescriba el programa de arranque?

Algo como esto:

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

Normalmente no

la mejor manera de hacer esto, pero creo que debería funcionar.

Fuente

2013-08-18 16:02:51 MitulP91

Resuelva su problema copiando la clase CSS y cambie el nombre. A continuación, utilice esta clase :)

Sé que es Impulsado pero mira al menos funciona

Ejemplo:

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

Fuente

2018-02-15 10:44:10 Dxg125

Respuesta

Cuestiones relacionadas