¿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.
Respuestas:
Agregue su propia clase, ej .: <div class="sidebar right"></div>, con el CSS como
.sidebar.right {
float:right
} 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.
!importantes que nunca más podrá anularlo en el futuro.
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é)
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í:
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 .
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.
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/
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.
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
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