Question

Tengo las siguientes lineas en index.html

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav menu-items">
                <li><a href="#">HOME</a></li>
                <li><a href="#">ANDROID</a></li>
                <li><a href="#">COLOSSUS</a></li>
                <li><a href="#">SOFTWARE LIBREA</a></li>
                <li><a href="#">NIRI BURUZ</a></li>
              </ul>

Y parte del CSS es el siguiente:

.menu-items >li > a{
    color:red;
}

En cambio el los links de clase menu-items no se muestran de color rojo. A continuación muestro una captura de firebug en la cual se ve como se esta superponiendo el valor de navbar-default .navbar-nav > li > a Me gustaría saber el motivo de esto y como solucionarlo.

Gracias.

Answer 1

Hola @egoitz_gonzalez,

es posible que los estilos de Bootstrap le "ganen" a los tuyos, si en la cabecera del HTML, tenés style.css antes que bootstrap.css.

Los estilos se aplican en orden, y para que el tuyo sobrescriba a los de bootstrap cuando ambos definen la misma regla, el tuyo tiene que estar después y no antes.

Saludos cordiales!

Answer 2

Bootstrap está sobre escribiendo tus estilos y habría que ver la web online para ver todo el código y decirte exactamente las cosas, aunque puedes utilizar:

color:red!important;

Con eso te queda.

Answer 3

Mejor descargas los archivos de Boostrap y ahi tienes la libertad de modificar el CSS a tu gusto.No es mala idea.