Ver Mensaje Individual
  #4 (permalink)  
Antiguo 24/02/2016, 02:37
JustinKO
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 12 años, 5 meses
Puntos: 47
Respuesta: Bootstrap se renderiza diferente en Firefox y Chrome

Hola, no sé si esto va a solucionar tu problema. Obviamente estás haciendo algo mal, bootstrap está optimizadísimo para que funcione en todos los navegadores.
Lo primero decirte que no estaría de más saber dónde se cierran esos tres primeros divs para saber un poco mejor cuál es tu intención con el código.
Solo como apunte, si pones un:
Código HTML:
Ver original
  1. <div class="col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" id="cuerpo">
bootstrap es mobile first, al haber definido el md, te sobra definir el lg si lo que vas a definir es lo mismo. esto no cambia nada pero es una cuestión de estilo y ahorrar código. Lo correcto sería así:
Código HTML:
Ver original
  1. <div class="col-md-10 col-md-offset-1 " id="cuerpo">
El lg lo hereda del md.
Otra cosa, en el header te sobra definir esas 12 columnas ya que al ser elemento de bloque te coge todo el ancho. Y te digo lo mismo, si hubiera sido necesario, al ser todos 12, con que definas el más pequeño, o sea el sm en este caso. sería suficiente.
Yo ese código lo hubiera puesto así:
Código HTML:
Ver original
  1. <div class="container-fluid">
  2.     <div class="row">
  3.         <div class="col-md-10 col-md-offset-1" id="cuerpo">
  4.             <header id="cabecera">
  5.                 <img class="img-responsive" src= "http://lorempixel.com/870/150/city/" width="120%" height="auto" alt="cabecera">
  6.                 <div class="contenido">
  7.                     <h1> Xxxxxxxxxxx</h1>
  8.                     <h3>Laboratorio de anaplatología</h3>
  9.                 </div>
  10.             </header>
  11.         </div>
  12.     </div>
  13. </div>

Eso sí, si en el header, en vez de poner col-loquesea-12 quisiera poner un col-loquesea-10, por ejemplo, metería otro row para que funcionara correctamente. algo así:
Código HTML:
Ver original
  1. <div class="container-fluid">
  2.     <div class="row">
  3.         <div class="col-md-10 col-md-offset-1" id="cuerpo">
  4.             <div class="row">
  5.                 <header  class="col-md-6 col-md-offset-3" id="cabecera"> <!-- Esto es solo un ejemplo -->
  6.                     <img class="img-responsive" src= "http://lorempixel.com/870/150/city/" width="120%" height="auto" alt="cabecera">
  7.                     <div class="contenido">
  8.                         <h1> Xxxxxxxxxxx</h1>
  9.                         <h3>Laboratorio de anaplatología</h3>
  10.                     </div>
  11.                 </header>
  12.             </div> 
  13.         </div>
  14.     </div>
  15. </div>

No sé si va a solucionar tu problema, de todos modos es la manera correcta, si te falla, el problema lo tienes en otra parte del código.

un saludo