style - etiquetas css

Cómo sobrescribir el estilo en Twitter Bootstrap

Question

¿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 hacia la derecha? Estoy usando HAML y SASS, pero soy relativamente nuevo en el desarrollo web.

Answer 1

La respuesta a esto es la especificidad de 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 un id mencionado 100 puntos
• Dar un elemento con una clase mencionó 10 puntos
• Dale a un elemento simple un solo punto 1

Entonces, para lo anterior, si tu 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 */

Por lo tanto, incluso si ha definido .navbar a después de .navbar ul li a , todavía se va a anular con un color rojo, en lugar de verde, ya que la especificidad es mayor (13 puntos).

Entonces, básicamente, todo lo que necesita hacer es calcular los puntos para el elemento por 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 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 (cómpralo tú mismo). Entonces todo lo que necesitamos es algo más que eso. Por lo tanto, he agregado identificaciones personalizadas a los elementos, es decir, contenedor de menú de inicio y menú de inicio. Ahora el siguiente css funcionará:

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

Hecho.

Puede consultar este enlace de MDN .

Answer 2

Llegó tan tarde, pero creo que podría usar otra respuesta.

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

Cambie cualquiera de ellos, como por ejemplo:

$bodyBackground: red;
@import "bootstrap";

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

Hablar con descaro a:

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

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

Answer 3

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

Usted sube el árbol HTML y especifica los elementos principales:

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

Puede ir 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/

Answer 4

Puedes asegurarte de que tu archivo css analice DESPUÉS de boostrap.css, así:

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

Answer 5

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 archivo bootstrapOverload.css se escribió después de las media queries . cuando lo moví por encima de las consultas de medios, comenzó a funcionar.

Por si acaso alguien más enfrenta el mismo problema

Answer 6

Si desea sobrescribir cualquier CSS en el uso de arranque, importante

Digamos que aquí está la clase de encabezado de página en bootstrap que tiene un margen de 40px 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 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 del margen de clase de encabezado de página bootstarp.

Answer 7

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

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

Por ejemplo, si esta es la forma en que 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 archivo site-specific.css ):

.sidebar {
float: right;
}

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

Answer 8

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

.sidebar.right {
float:right
}