twitter-bootstrap
Nido de rejilla

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails
Buscar..


Introducción

En Bootstrap es posible usar columnas de cuadrícula dentro de otras columnas. Esto es útil cuando se crean diseños de respuesta avanzados que utilizan múltiples niveles de cuadrícula .

Observaciones

Podemos tener la mayor cantidad de columnas posible de la manera mencionada anteriormente.

Columnas de anidación

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

El ejemplo se toma de [ http://getbootstrap.com/css/#grid-nesting◆ [ ]]

Como lo sugiere la documentación del sitio web oficial.

Para anidar su contenido con la cuadrícula predeterminada, agregue una nueva columna .row y un conjunto de columnas .col-sm- * dentro de una columna existente .col-sm- *. Las filas anidadas deben incluir un conjunto de columnas que suman hasta 12 o menos (no es necesario que use las 12 columnas disponibles).

introduzca la descripción de la imagen aquí



Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow