Cómo sobrescribir el estilo en Twitter Bootstrap

128

¿Cómo puedo sobrescribir los estilos en Twitter Bootstrap? Por ejemplo, actualmente estoy usando una clase .sidebar que tiene la regla CSS 'float: left;' ¿Cómo puedo cambiar esto para que vaya a la derecha? Estoy usando HAML y SASS pero soy relativamente nuevo en el desarrollo web.

css twitter-bootstrap Juan
fuente
Ver también: stackoverflow.com/questions/8596794/…
Zim

Respuestas:

41

Agregue su propia clase, ej .: <div class="sidebar right"></div>, con el CSS como

.sidebar.right { 
    float:right
}
motoxer4533
fuente
1
No es una buena práctica: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes
Damjan Pavlica
2
@DamjanPavlica Honestamente? ¿Todavía te importa IE 6? Sin mencionar que, creo, bootstrap usa el encadenamiento.
Błażej Michalik
233

Todos estos consejos funcionarán, pero una forma más simple podría ser incluir su hoja de estilo después de los estilos Bootstrap.

Si incluye su CSS ( site-specific.css) después de Bootstrap (bootstrap.css ), puede anular las reglas redefiniéndolas.

Por ejemplo, si así es como incluye CSS en su <head>

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

Simplemente puede mover la barra lateral hacia la derecha escribiendo (en su site-specific.cssarchivo):

.sidebar {
    float: right;
}

Perdone la falta de HAML y SASS, no los conozco lo suficientemente bien como para escribir tutoriales en ellos.

citelao
fuente
77
@ClaudiuConstantin No veo ninguna razón por la que no. La regla general es que el segundo estilo siempre prevalecerá sobre el primero si dos tienen el mismo nivel de especificidad. Siempre que su estilo venga, se anulará.
citelao
3
@Kreker Eso probablemente tiene mucho que ver con la especificidad. Puede leer sobre esto aquí (artículo anterior), pero básicamente .sidebar.rightes más específico que .sidebar. Ese es probablemente el problema. Use el inspector web para descubrir qué lo anula.
citelao
2
@Kreker, sí, esa es la idea. El problema !importantes que nunca más podrá anularlo en el futuro.
citelao
55
My Site.cssestá empaquetado y enumerado y se muestra Bundle.configfísicamente después, bootstrap.css pero los estilos aún no se anulan. Tuve que sacar la site.cssreferencia del paquete de modernizador y ponerla manualmente después de bootstrap.css(y presionar Ctrl + F5 una vez que se depura para borrar el caché)
camino el
1
Esto podría funcionar, pero no sería la mejor práctica para la producción. Cargue 1 hoja de estilo por sitio a menos que haya una gran razón para no hacerlo. #sitespeed
Ben Racicot
58

La respuesta a esto es la especificidad CSS. Debe ser más "específico" en su CSS para que pueda anular las propiedades de bootstrap css.

Por ejemplo, tiene un código de muestra para un menú de arranque aquí:

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

Aquí, debe recordar la jerarquía de la especificidad. Dice así:

  • Dar un elemento con una identificación mencionada 100 puntos
  • Dar un elemento con una clase mencionada 10 puntos
  • Dale a un elemento simple un solo 1 punto

Entonces, para lo anterior si su CSS tiene algo como esto:

.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 */

Entonces, incluso si ha definido el .navbar aafter.navbar ul li a , aún se anulará con un color rojo, en lugar de un verde, ya que la especificidad es mayor (13 puntos).

Entonces, básicamente todo lo que necesita hacer es calcular los puntos para el elemento para el que desea cambiar el CSS, a través del elemento de inspección en su navegador. Aquí, bootstrap ha especificado su CSS para el elemento como

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

Entonces, incluso si su css se está cargando después de bootstrap.css, que tiene la siguiente línea:

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

todavía se representará como # 999. Para resolver esto, bootstrap tiene 22 puntos (calcule usted mismo). Entonces, todo lo que necesitamos es algo más que eso. Por lo tanto, he agregado ID personalizados a los elementos, es decir, home-menu-container y home-menu. Ahora funcionará el siguiente CSS:

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

Hecho.

Puede consultar este enlace MDN .

kaizer1v
fuente
1
¿Y si están atados?
Confundido
2
No importa, por ejemplo, '.abc.xyz' significa que hay un elemento con la clase 'abc' y 'xyz'; todavía lo tomará como un elemento único con una clase. Por lo tanto, 10 puntos. Lo mismo ocurre con una identificación.
kaizer1v
1
¡Bien escrito! ¡Gracias!
GobSmack
1
Este fue el truco para mí. Estaba teniendo problemas para anular el blockquoteestilo en Bootstrap CSS. Curiosamente, estaba mal para las comillas en bloque normales, pero parecía correcto y <ul> dentro de una comilla en bloque. La clave era actualizar mi CSS para tener blockquote p, lo que le dio suficiente prioridad. El <ul> estaba haciendo esto para la otra sección de la página.
Adam Wuerl
20

Puede sobrescribir una clase CSS haciéndola "más específica".

Sube el árbol HTML y especifica elementos principales:

div.sidebar { ... } es más específico que .sidebar { ... }

Puede llegar hasta BODY si necesita:

body .sidebar { ... } anulará prácticamente cualquier cosa.

Consulte esta práctica guía: http://css-tricks.com/855-specifics-on-css-specificity/

Diodeus - James MacFarlane
fuente
Esta es realmente la mejor respuesta
CodyBugstein
9

Puede asegurarse de que su archivo css se analice DESPUÉS de boostrap.css, así:

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

Gothburz
fuente
6

Si desea sobrescribir cualquier CSS en el uso de bootstrap! Importante

Digamos que aquí está la clase de encabezado de página en bootstrap que tiene un margen de 40 px en la parte superior, a mi cliente no le gusta y quiere que sea 15 en la parte superior y 10 en la parte inferior solamente

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

Así que agregué en la clase en mi archivo site.css con el mismo nombre como este

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

Tenga en cuenta lo importante con mi margen, que sobrescribirá el margen de margen de clase de encabezado de página bootstarp.

Ali Adravi
fuente
¡increíble! esto es lo que quiero. Gracias
Gisway
2
Tenga en cuenta que usar! Important es algo así como un antipatrón. Lea más aquí: james.padolsey.com/css/dont-use-important
mayatron
3

Encontré esto tarde, pero creo que podría usar otra respuesta.

Si está utilizando sass, puede cambiar las variables antes de importar bootstrap. http://twitter.github.com/bootstrap/customize.html#variables

Cambie cualquiera de ellos, como:

$bodyBackground: red;
@import "bootstrap";

Alternativamente, si no hay una variable disponible para lo que desea cambiar, puede anular los estilos o agregar los suyos.

Hablar con descaro a:

@import "bootstrap";

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

Vea también esto: Estructura de activos SCSS adecuada en rieles

AJcodez
fuente
2

Sé que esta es una vieja pregunta, pero aún así, me encontré con un problema similar y me di cuenta de que mi código css "no funciona" en mi bootstrapOverload.cssarchivo fue escrito después delmedia queries . cuando lo moví por encima de las consultas de medios, comenzó a funcionar.

Por si alguien más se enfrenta al mismo problema

md1hunox
fuente