Bootstrap 3
  • Contenidos
  • Introducción
    • Frameworks responsive
    • Funcionamiento del diseño adaptable
    • Probando el responsive
  • Página básica
  • Sistema de Rejilla
    • Forzar el cambio de fila
    • Anidamiento de columnas
    • Márgenes o espaciado entre columnas
    • Ordenación de columnas
  • Utilidades responsive
  • Media Queries
  • Componentes Responsive
    • Botones
    • Desplegables
    • Grupos de botones
    • Formularios
    • Navegación
    • Barra de navegación
    • Tablas
  • Ejercicios 1
  • Ejercicios 2
  • Bibliografía
Con tecnología de GitBook
En esta página

¿Te fue útil?

  1. Sistema de Rejilla

Anidamiento de columnas

AnteriorForzar el cambio de filaSiguienteMárgenes o espaciado entre columnas

Última actualización hace 5 años

¿Te fue útil?

Una característica muy potente del sistema de columnas es que se pueden anidar unas dentro de otras, por ejemplo, dentro de una columna de tamaño 9 podemos crear una nueva fila y subdividirla como queramos (igual que si fuera una fila normal, con hasta 12 columnas). A continuación se incluye un ejemplo:

<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>
Anidamiento de columnas