html español - Problema de IE8 con Twitter Bootstrap 3




descargar compatibilidad (19)

Como se indicó anteriormente, hay dos problemas diferentes: 1) IE8 no admite consultas de medios 2) respond.js utilizado junto con archivos css de dominios cruzados debe incluirse como se describió anteriormente.

Si desea utilizar BootstrapCDN, aquí tiene un ejemplo práctico:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

También asegúrese de copiar respond.proxy.gif, respond.min.js y response.proxy.js en directorios locales

Estoy creando un sitio usando el nuevo Twitter Bootstrap. El sitio se ve bien y funciona en todos los navegadores requeridos, excepto IE8.

En IE8 parece que se muestran elementos de la versión móvil pero se extiende a través de la pantalla completa de mi escritorio. Creo que el problema que tengo es que Twitter bootstrap es móvil primero. Así que por alguna razón IE8 va por esta opción.

También me doy cuenta de que la clase container no parece estar tirando de las propiedades CSS de ancho máximo como se esperaba. ¿Alguien puede ver lo que he hecho mal?

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

En mi caso, el CSS minificado de bootstrap estaba causando el problema. Para hacer que bootstrap 3.0.2 sea receptivo en IE8 (emulado con las herramientas de desarrollo F12) tuve que:

1 - Establecer la bandera de X-UA Compatible.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2: use bootstrap.css no minificado, en lugar de bootstrap.min.css

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

3 - Agregue el respond.js (y html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

Asegúrate de vincular la fuente bootstrap por separado

Si usas LESS o SASS no te apresures a compilar los estilos. En mi proyecto, bootstrap.min.css en mi estilo principal, en la parte superior del archivo, por lo que solo debería haber una solicitud para todos los estilos.

Y debido a eso, las clases de boostrap no funcionaron correctamente. Cuando se agrega por separado, funciona como se espera.


Mi etiqueta de la cabeza es así:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

si desea probar en local ... intente a través de localhost, o cree un servidor de control de calidad y configure el contenido e intente.

Necesitamos respond.js para bootstrap 3 y no funcionará en la máquina local si simplemente lo colocamos en js y lo agregamos a html en el encabezado. Se dirá acceso denegado. funciona solo a través del servidor ya que IE tiene restricción de seguridad. :PAG


Tengo una solución para este problema. En realidad, IE7 y 8 no admiten el @media correctamente y si se comprueban las clases "col-md- *" en el css y el ancho se indica en el ancho del medio 992px. Simplemente cree un nuevo archivo css, por ejemplo, IE.css y agregue los comentarios condicionales. Y luego simplemente copie las clases requeridas para su diseño directamente con cualquier consulta de medios allí y listo.


ponga respond.js al final de la página pero antes de cerrar body etiqueta del body y aquí está el enlace de respond.js y ejecute este código en su host local.

https://github.com/scottjehl/Respond


He resuelto a continuación los pasos.

(1) instaló el módulo Respond.js para drupal 7. (2) módulo lessphp para drupal 7 establecido en las bibliotecas, en lugar de la carpeta del módulo. (3) (3.1) <meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

usando cdn bootstrap desde la configuración del tema.

Para obtener más información, consulte el blog de mi sitio web para el diseño y desarrollo de drupal www.devangsolanki.com


He leído todos los comentarios aquí, lo intenté todo ... pero no pude hacer que funcionara con Windows 7 - Internet Explorer 11 ( con modo de documento: IE8 ).

Entonces me vino a la mente que ejecutar un modo de documento (IE8) no es lo mismo que el IE8 real, así que instalé Windows Virtual PC ( Windows 7 con Internet Explorer 8 ) y tadaaaa ... ¡ funciona como un encanto!

He puesto esta pieza de código JUST en la parte inferior de la página para que funcione:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Tuve exactamente el mismo problema al migrar de bootstrapv2 a v3.

Si (como yo) ha migrado reemplazando el antiguo spanX con col-sm-X, también necesita agregar clases col-X. col-X son los estilos que están fuera de cualquier bloque @media, por lo que funcionan sin soporte de consulta de medios.

Para arreglar el ancho del contenedor, puede configurarlo usted mismo fuera de un bloque @media. Algo como:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

De la explicación se dice que IE8 es la versión estándar para usted y que content="IE=edge" hará que la página se encuentre en el modo más alto. Para hacerlo compatible, cámbielo a content="IE=8" .

El modo IE8 es compatible con muchos estándares establecidos, incluida la especificación del Nivel 2.1 de las hojas de estilo en cascada del W3C y la API de selectores del W3C; también proporciona soporte limitado para la Especificación de Nivel 3 de las Hojas de Estilo en Cascada W3C (Borrador de Trabajo) y otros estándares emergentes.

El modo perimetral le dice a Internet Explorer que muestre el contenido en el modo más alto disponible. Con Internet Explorer 9, esto es equivalente al modo IE9. Si una versión futura de Internet Explorer admite un modo de mayor compatibilidad, las páginas configuradas en modo borde aparecerán en el modo más alto compatible con esa versión. Esas mismas páginas seguirán apareciendo en el modo IE9 cuando se visualicen con Internet Explorer 9.

Referencia ¿Qué hace <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?


Si usa Bootstrap 3 y todo funciona bien en otros navegadores excepto IE, intente lo siguiente.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

He sufrido el mismo problema en IE 10.0. Sé que este no es exactamente el problema en el OP, pero quizás sea útil para otros.

En mi caso, tenía una línea vacía al principio del documento:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

Si la línea en blanco está entre el DOCTYPE y la etiqueta, el problema también se muestra:

<!DOCTYPE html>
[blank line]
<html lang="es">

Una vez que eliminé la línea en blanco y sin el meta mágico compatible con X-UA, IE 10 comenzó a renderizar el sitio correctamente.

Si está utilizando PHP y Smarty, tenga cuidado con sus comentarios de Smarty porque agregarán esas líneas en blanco problemáticas :-)


Por si acaso. Asegúrese de cargar los archivos js específicos de IE después de cargar sus archivos css.


Justo como un heads up. Tuve el mismo problema y ninguno de los anteriores lo solucionó. Finalmente, descubrí que respond.js no analiza el CSS al que se hace referencia a través de @import . Tuve todo el bootstrap.min.css importado a través de @import en mi main.css .

Así que asegúrese de no tener ningún CSS que contenga sus consultas de medios a las que se hace referencia a través de @import .


Me enfrenté al mismo problema, intenté la primera respuesta pero faltaba algo.

Si están usando Webpack, su css se cargará como una etiqueta de estilo que no es compatible con respond.js, necesita un archivo, así que asegúrese de que bootstrap esté cargado como un archivo css

Personalmente usé extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

Espero que te ayude


No olvide colocar sus enlaces css en el <head> ya que respond.js toma solo esos.


Obtuvo su CSS de CDN (bootstrapcdn.com) respond.js solo funciona para archivos locales. Pruebe su sitio web en IE8 con una copia local de bootstrap.css. O lea: Configuración de CDN / X-Domain

Nota Consulte también: https://github.com/scottjehl/Respond/pull/206

Actualizar:

Por favor lea: http://getbootstrap.com/getting-started/#support

Además, Internet Explorer 8 requiere el uso de respond.js para habilitar el soporte de consultas de medios.

Consulte también: https://github.com/scottjehl/Respond

Por esta razón, la plantilla básica contiene estas líneas en la sección de encabezado:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

Después de verificar:

  • DOCTYPE
  • Etiqueta meta compatible con X-UA
  • Inclusión de html5shiv.js y respond.js (y descarga de las últimas versiones)
  • respond.js siendo local
  • Sitio de alojamiento de un servidor web y no de Archivo: //
  • No usar @import
  • ...

Todavía no funcionaban col-lg, col-md y col-sm. Finalmente, moví las referencias a bootstrap antes de las referencias a html5shiv.js y respond.js y todo funcionó.

Aquí hay un fragmento de código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

tl; dr - TWBSColor - Genera tu propia barra de navegación de Bootstrap

Notas de la versión: - Herramienta en línea: Bootstrap 3.3.2+ / 4.0.0+ - Esta respuesta: Bootstrap 3.0.x

Barras de navegación disponibles

Tienes dos barras de navegación básicas:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

Uso de color predeterminado

Aquí están los colores principales y su uso:

  • #F8F8F8 : fondo de la barra de navegación
  • #E7E7E7 : borde de la barra de navegación
  • #777 : color por defecto
  • #333 : hover color ( #5E5E5E para .nav-brand )
  • #555 : color activo
  • #D5D5D5 : fondo activo

Estilo por Defecto

Si desea poner un estilo personalizado, aquí está el CSS que necesita cambiar:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

Ejemplos de barra de navegación de colores personalizados

Aquí hay cuatro ejemplos de una barra de navegación de color personalizado:

JSFiddle link

Y el código SCSS:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

Y por fin, un pequeño regalo.

Acabo de crear un script que te permitirá generar tu tema: TWBSColor - Genera tu propia barra de navegación de Bootstrap

[Actualización]: TWBSColor ahora genera código SCSS / SASS / Less / CSS.
[Actualización]: a partir de ahora, puede usar Menos como el idioma predeterminado proporcionado por TWBSColor
[Actualización]: TWBSColor ahora admite la colorización de menús desplegables
[Actualización]: TWBSColor ahora permite elegir su versión (se agregó soporte para Bootstrap 4)







html css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3