Bootstrap che combina righe (rowspan)

Question

Sto testando Twitter Bootstrap e mi sono bloccato con il ponteggio base con le righe. Ho rivisitato la loro documentazione numero di volte e posso vedere le colonne di nidificazione in cui è possibile nidificare fondamentalmente colonne all'interno di una colonna, ma non riesco a individuare la possibilità di combinare le righe in una e di averla allineata con la colonna accanto alle righe non combinate.

L'immagine in basso dovrebbe illustrare ciò che voglio ottenere.

L'unica soluzione soluzione mi sono imbattuto sta usando le tabelle, ma non mi piace questa idea come la mia opinione è che la risposta non avrebbe funzionato con l'uso di tabelle.

Qualcuno ha una soluzione elegante a questo? La maggior parte del layout web che ho bisogno avrà bisogno di un buon livello di flessibilità, quindi sarà fantastico se potessi raccogliere qualcosa di utile qui.

Answer 1

Divs pila verticale di default, quindi non c'è necessità di gestione speciale di "file" in 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 the fiddle.

Answer 2

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

È possibile eseguire questa operazione utilizzando row-fluid per creare una riga basata su fluido (percentuale) all'interno di uno block esistente.

<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 uno JSFiddle example.

Ho notato che c'era uno strano margine sinistro che appare (o non appare) per gli span all'interno dello row-fluid dopo il primo. Questo può essere risolto con un piccolo ritocco CSS (è lo stesso CSS che viene applicato al primo figlio, ampliato a quelli oltre il primo figlio):

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

Answer 3

controllare questo. spero che ti aiuti pieno 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;} 

Answer 4

È necessario utilizzare la nidificazione della colonna di bootstrap.

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

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

(Nella schermata Fiddle, ingrandire il vostro schermo di prova per vedere il risultato, perché Im utilizzando col- md - *, quindi colonne con pile reattive)

Nota:: Non sono sicuro che BS2 consenta l'inserimento delle colonne n., ma nella risposta di Paul Keister, non viene utilizzato il nidificazione delle colonne. Dovresti usarlo ed evitare di reinventare css mentre bootstrap fa bene.

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

Answer 5

La risposta di Paul sembra sconfiggere lo scopo del bootstrap; quello di essere sensibile alle dimensioni dello schermo/della finestra.

Nidificando righe e colonne è possibile 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 view the codepen here.