Full Row Width dentro de un Bootstrap Container


Recientemente trabajé mi primer proyecto con Drupal; aunque no toqué casi nada de backend, el diseño fue bastante peculiar y la forma en como se implementó el frontend fue bastante interesante.

Al ser Drupal un CMS, normalmente lo que se escribe dentro del editor, se va a insertar dentro de alguna sección del template.
En este caso en partícular el template se hizo con Bootstrap y el contenido de una publicación (entiéndase página o post) se inyecta dentro de un container.
De acuerdo a la documentación de Bootstrap el container mide 1170px, por lo que si quisiéramos agregar algún elemento que abarcara todo el ancho de la pantalla, tendríamos que colocarlo dentro de otro contenedor, p.e. un container-fluid.

Lo que se intentaba lograr era algo así:

full row

Sin embargo, al agregar el widget dentro del editor del CMS, lo que obteníamos era algo así:

full row 2

Buscando alguna manera de solucionar el problema, me encontré con un fiddle en donde se exponía justamente lo que yo quería lograr.

La solución al problema consiste en las siguientes líneas de código:

    .full-row{
        position: relative;
        margin: 30px -100%;
        padding: 0 100%;
        background-color: #00a1e1;
    }

Básicamente, el margen negativo y el padding son los que hacen que el contenedor “crezca” de forma horizontal, de tal manera que abarca toda la extensión de la pantalla.

Nota:
En stack overflow se pueden encontrar discusiones sobre la mejor manera de encarar el problema, pero esa fue la que a mi me sirvió.

Anuncios
Esta entrada fue publicada el 25 septiembre, 2015 a las 14:27. 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: