twitter-bootstrap - div - colspan y rowspan html5

Bootstrap que combina filas(rowspan)

Question

Estoy probando Twitter Bootstrap y me quedé atrapado con andamios básicos con filas. Volví a visitar su documentación varias veces y puedo ver columnas de anidamiento donde básicamente puede anidar columnas dentro de una columna, pero no puedo encontrar la capacidad de combinar filas en una y alinearla con la columna junto a las filas sin combinar.

Debajo de la imagen debería ilustrar lo que quiero lograr.

La única solución alternativa que encontré es el uso de tablas, pero no me gusta esta idea, ya que mi opinión es que la capacidad de respuesta no funcionaría con el uso de tablas.

¿Alguien tiene alguna solución elegante para esto? La mayor parte del diseño web que haga necesitará un buen nivel de flexibilidad, por lo que sería genial si pudiera encontrar algo útil aquí.

Answer 1

La respuesta de Pablo parece frustrar el propósito del bootstrap; el de ser sensible al tamaño de la ventana / pantalla.

Al anidar filas y columnas puede lograr el mismo resultado, al mismo tiempo que conserva la capacidad de respuesta.

Aquí hay una respuesta actualizada a este problema;

<div class="container-fluid">
  <h1>  Responsive Nested Bootstrap </h1> 
  <div class="row">
    <div class="col-md-5" style="background-color:red;">Span 5</div>
    <div class="col-md-3" style="background-color:blue;">Span 3</div>
    <div class="col-md-2">
      <div class="row">
        <div class="container" style="background-color:green;">Span 2</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:purple;">Span 2</div>
      </div>
    </div>
    <div class="col-md-2" style="background-color:yellow;">Span 2</div>
  </div>
  
  <div class="row">
    <div class="col-md-6">
      <div class="row">
        <div class="container" style="background-color:yellow;">Span 6</div>
      </div>
      <div class="row">
        <div class="container" style="background-color:green;">Span 6</div>
      </div>
    </div>
    <div class="col-md-6" style="background-color:red;">Span 6</div>
  </div>
</div>

Puede ver el codepen aquí.

Answer 2

Las divisiones se acumulan verticalmente de forma predeterminada, por lo que no es necesario un manejo especial de las "filas" dentro de una columna.

div {
  height:50px;
}
.short-div {
  height:25px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Aquí está el violín .

Answer 3

Nota: Esto fue para Bootstrap 2 (relevante cuando se hizo la pregunta).

Puede lograr esto usando row-fluid para formar una row-fluid fluido (porcentaje) dentro de un block existente.

<div class="row">
   <div class="span5">span5</div>
   <div class="span3">span3</div>
   <div class="span2">
      <div class="row-fluid">
         <div class="span12">span2</div>
         <div class="span12">span2</div>
      </div>
   </div>
   <div class="span2">span2</div>
</div>
<div class="row">
   <div class="span6">
      <div class="row-fluid">
         <div class="span12">span6</div>
         <div class="span12">span6</div>
      </div>
   </div>
   <div class="span6">span6</div>
</div>

Aquí hay un ejemplo de JSFiddle .

Noté que había un margen izquierdo impar que aparece (o no aparece) para los tramos dentro del row-fluid de la row-fluid después del primero. Esto se puede solucionar con un pequeño ajuste de CSS (es el mismo CSS que se aplica al primer hijo, ampliado a los que pasaron el primer hijo):

.row-fluid [class*="span"] {
    margin-left: 0;
}

Answer 4

Revisa este. Espero que te ayude por completo.

http://jsfiddle.net/j6amM/

.row-fix { margin-bottom:20px;}

.row-fix > [class*="span"]{ height:100px; background:#f1f1f1;}

.row-fix .two-col{ background:none;}

.two-col > [class*="col"]{ height:40px; background:#ccc;}

.two-col > .col1{margin-bottom:20px;}

Answer 5

Deberías usar la anidación de la columna bootstrap.

Ver http://getbootstrap.com/css/#grid-nesting

En Bootstrap 3:

<div class="row">
    <div class="col-md-5">Span 5</div>
    <div class="col-md-3">Span 3<br />second line</div>
    <div class="col-md-2">
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
        <div class="row">
            <div class="col-md-12">Span 2</div>
        </div>
    </div>
    <div class="col-md-2">Span 2</div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">Span 6</div>
            <div class="col-md-12">Span 6</div>
        </div>
    </div>
    <div class="col-md-6">Span 6</div>
</div>

http://jsfiddle.net/DRanJ/125/

(En la pantalla Fiddle, amplíe la pantalla de prueba para ver el resultado, porque estoy usando colmdd - *, luego columnas de pilas reactivas)

Nota : No estoy seguro de que BS2 permita el anidamiento de columnas , pero en la respuesta de Paul Keister, no se utiliza el anidamiento de columnas. Debes usarlo y evitar reinvente css mientras bootstrap funciona bien.

La altura de las columnas es automática, si agrega una segunda línea (como hago en mi ejemplo), la altura de la columna se adapta a sí misma.