Twitter Bootstrap Grid Problem en IE 7


Hace poco estaba trabajando en un proyecto, en el cual intentando hacer un diseño de forma responsiva, fuimos a dar con esta nueva herramienta que ha causado gran sensación: Twitter Bootstrap.

Esta herramienta ha sido de gran ayuda para muchos, ya que su fácil uso y su buena documentación permite generar sitios que pueden visualizarse en diversos dispositivos (monitores, tabletas y teléfonos).

Bootstrap Grid

Aún existen bugs en cuanto al sistema de grids y la visualización en Internet Explorer. Esta vez yo me encontré con un problema bastante raro; si has leído la documentación sabrás que el grid consta de 12 columnas.

En mi diseño, yo tenia un contenedor de tamaño completo (span12) y queria poner  dentro de ese contenedor dos columnas: una con el contenido principal y otra como sidebar. Según la documentación, si vas a trabajar de esa manera, hay que agregar una clase row-fluid para que cuando se reduzca la resolución de la pantalla, el contenido se vaya apilando, lo cual es ideal en el caso de los dispositivos móviles.

<!-- MAIN CONTAINER-->
<div id="main">
  <div class="row-fluid margen">
    <!--  PRIMERA COLUMNA -->
    <div class="span8">
      <!-- el contenido de la primera columna -->
    </div>
    <!--  SEGUNDA COLUMNA -->
    <div class="span3 offset1">
      <!-- el contenido de la primera columna -->
    </div>
  </div>
</div>

El problema con este código según el repositorio github de bootstrap es que la clase de row-fluid no reconoce al first-child (el span correspondiente a la primera columna), ya que el comentario le estorba, por lo que hay que quitarlo.

Entonces tomando en cuenta esto, el único cambio que hice en el código fue mover a otro lugar el comentario de PRIMERA COLUMNA:

<!-- MAIN CONTAINER-->
<div id="main">
  <div class="row-fluid margen">
    <div class="span8"> <!--  PRIMERA COLUMNA -->
      <!-- el contenido de la primera columna -->
    </div>
    <!--  SEGUNDA COLUMNA -->
    <div class="span3 offset1">
      <!-- el contenido de la primera columna -->
    </div>
  </div>
</div>

Y con esto arreglé el problema que tenía con el IE 7, ya que a esa columna le daba un margen, causando que todo el contenido (las 2 columnas) de mi main container se desplazara a la derecha, por consiguiente, la segunda columna no cabía y se mostraba abajo de la primera, rompiendo con el estilo.

Eso es todo, espero que les sirva.

Anuncios
Esta entrada fue publicada el 20 mayo, 2013 a las 22:55. Se guardó como Tech y etiquetado como , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: