html - ¿Cuál es el propósito de.row en Bootstrap?

css twitter-bootstrap

Question

De acuerdo con la documentación de Bootstrap

Las filas deben colocarse dentro de un .container (ancho fijo) o .container-fluid (ancho completo)

y

Use filas para crear grupos horizontales de columnas.

¿Por qué es esto necesario?

Un .row solo puede ocupar el ancho máximo de .container o .container-fluid

Dado que tiene que cerrar el .row , parece más largo escribir:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h1>Column A</h1>
        </div>
        <div class="col-md-6">
            <h1>Column B</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <h1>Column C</h1>
        </div>
        <div class="col-md-6">
            <h1>Column D</h1>
        </div>
    </div>
</div>

Que esto:

<div class="container">
    <div class="col-md-6">
        <h1>Column A</h1>
    </div>
    <div class="col-md-6">
        <h1>Column B</h1>
    </div>
 </div>

<div class="container">
    <div class="col-md-6">
        <h1>Column C</h1>
    </div>
    <div class="col-md-6">
        <h1>Column D</h1>
    </div>
</div>

Answer 1

Los elementos .row tienen un margen negativo en ambos lados. Todas las columnas tienen un relleno que cuida el espacio, incluso la primera y la última (que es algo que no queremos), por lo que el .row las tira hacia atrás para arreglar eso. Además, creo que tiene más sentido tener más filas en un contenedor, en lugar de columnas.

Answer 2

Envase

El contenedor proporciona las restricciones de ancho en los anchos receptivos. Cuando los tamaños de respuesta cambian, es el contenedor el que cambia. Las filas y las columnas están basadas en porcentajes, por lo que no necesitan cambiar. Tenga en cuenta que hay un margen de 15 píxeles en cada lado, cancelado por filas.

Filas

Las filas siempre deben estar en un contenedor.

La fila proporciona a las columnas un lugar para vivir, idealmente con columnas que suman 12. También actúa como un contenedor ya que todas las columnas flotan a la izquierda, las filas adicionales no tienen superposiciones cuando los flotadores se vuelven raros.

Las filas también tienen un margen negativo de 15 píxeles en cada lado. El div que forma la fila normalmente estaría restringido dentro del relleno del contenedor, tocando los bordes del área rosa pero no más allá. Los márgenes negativos de 15px empujan la fila hacia afuera sobre la parte superior del relleno de 15px de los contenedores, esencialmente negándolo. Además, las filas aseguran que todos los divs dentro de él aparezcan en su propia línea, separados de las filas anteriores y siguientes.

Columnas

Las columnas ahora tienen un relleno de 15px. Este relleno significa que las columnas realmente tocan el borde de la fila, que a su vez toca el borde del contenedor ya que la fila tiene el margen negativo y el contenedor tiene el relleno positivo. Pero, el relleno en la columna empuja cualquier cosa dentro de la columna hacia donde debe estar, y también proporciona el canal de 30px entre columnas. Nunca use una columna fuera de una fila, no funcionará.

Para más información, le sugiero que lea este artículo . Está realmente claro y explica bien cómo funciona el sistema de cuadrícula de Bootstrap.