Bootstrap che combina le righe (rowpan)

Sto testando Twitter Bootstrap e mi sono bloccato con impalcature di base con file. Ho rivisto il loro numero di documentazione diverse volte e posso vedere le colonne di nidificazione in cui puoi praticamente nidificare le colonne all'interno di una colonna ma non riesco a individuare la capacità di combinare le righe in una e di averla allineata con la colonna accanto alle righe non combinate.

L'immagine qui sotto dovrebbe illustrare ciò che voglio realizzare.

L'unica soluzione alternativa che ho riscontrato è l'utilizzo delle tabelle, ma questa idea non mi piace poiché la mia opinione è che la reattività non funzionerebbe con l'uso delle tabelle.

Qualcuno ha qualche soluzione elegante per questo? La maggior parte del layout web che faccio avrà bisogno di un ottimo livello di flessibilità, quindi sarebbe fantastico se potessi prendere qualcosa di utile qui.

I div si impilano verticalmente per impostazione predefinita, quindi non è necessaria una gestione speciale delle "righe" all'interno di una colonna.

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>

Ecco il violino .

È necessario utilizzare l'annidamento della colonna bootstrap.

Vedi Bootstrap 3 o Bootstrap 4 :

<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/

(Schermo A Fiddle, ingrandire il vostro schermo di prova per vedere il risultato, perché sto utilizzando col- md - *, poi pile responsive colonne)

Nota : non sono sicuro che BS2 consenta l' annidamento delle colonne , ma nella risposta di Paul Keister, l'annidamento delle colonne non viene utilizzato. Dovresti usarlo ed evitare di reinventare CSS mentre Bootstrap fa bene.

L'altezza delle colonne è automatica, se aggiungi una seconda riga (come faccio nel mio esempio), l'altezza della colonna si adatta da sola.

Nota: questo era per Bootstrap 2 (rilevante quando è stata posta la domanda).

È possibile ottenere ciò utilizzando row-fluidper creare una riga fluida (percentuale) all'interno di una esistente block.

<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>

Ecco un esempio di JSFiddle .

Ho notato che c'era uno strano margine sinistro che appare (o non appare) per le campate all'interno del row-fluiddopo il primo. Questo può essere risolto con un piccolo tweak CSS (è lo stesso CSS che viene applicato al primo figlio, espanso a quelli passati al primo figlio):

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

Controlla questo. spero che ti sia di aiuto per te.

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;}

La risposta di Paul sembra vanificare lo scopo del bootstrap; quello di rispondere alle dimensioni del viewport / schermo.

Nidificando righe e colonne puoi ottenere lo stesso risultato, mantenendo la reattività.

Ecco una risposta aggiornata a questo 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>

Puoi visualizzare il codice qui.