Bootstrap 3: pagina divisa in quattro parti uguali

Question

Sto provando a suddividere una sezione del mio sito di una pagina (utilizzando Bootstrap 3) in 4 parti uguali ma non riesco a farlo funzionare.

ho pensato che avrei potuto solo aggiungere classi extra per ogni col-md-6, ma il problema è in realtà che l'altezza è allineato al contenuto e non posso usare le altezze risolto perché dovrebbe essere sensibile ...

<section> 
 
    ... 
 
    
 
</section> 
 

 
<section id="theproject" class="project"> 
 
    <div class="container" > 
 
\t \t <div class="row"> 
 
\t  \t <div class="col-md-6"> 
 
\t  \t </div> 
 
\t \t   TOPLEFT 
 
\t \t \t <div class="col-md-6"> 
 
\t \t \t \t TOPRIGHT 
 
\t \t \t </div> 
 
    \t </div> 
 
\t \t 
 
\t \t <div class="row"> 
 
    \t \t <div class="col-md-6"> 
 
     \t \t  BOTTOMLEFT 
 
    \t \t </div> 
 
\t \t \t 
 
    \t \t <div class="col-md-6"> 
 
     \t \t  BOTTOMRIGHT 
 
    \t \t </div>  
 
    \t </div> 
 
    </div> 
 
</section>

mio custom.css assomiglia a questo:

.project { 
 
    height: auto !important; 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
\t background: white; 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-style: normal; 
 
    font-size: 16px; 
 
}

Grazie per il vostro aiuto!

Answer 1

Se ho capito cosa stai chiedendo, ecco come puoi dividere il tuo bootstrap in 4 parti uguali. Le altezze si adattano per corrispondere all'altezza della colonna con il contenuto più alto (il più alto).

Here is the Bootply so you can try it out.

HTML

<div class="row equal"> 

     <div class="col-xs-6 col-sm-3"> 
     content 
     </div> 

     <div class="col-xs-6 col-sm-3"> 
     content 
     </div> 

     <div class="col-xs-6 col-sm-3"> 
     content 
     </div> 

     <div class="col-xs-6 col-sm-3"> 
     content 
     </div> 

    </div> 

CSS

.equal, .equal > div[class*='col-'] { 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     flex:1 0 auto; 
    } 

CURA: Soluzione per 4 quadranti uguali

Vedere il lavoro Bootply qui http://www.bootply.com/qmwjea4pG3#

Esempio Di seguito

HTML

<div class="contents"> 
<div class="col-md-6 quarter" style="background-color:blue;">test</div> 
<div class="col-md-6 quarter" style="background-color:red;">test</div> 
<div class="col-md-6 quarter" style="background-color:yellow;">test</div> 
<div class="col-md-6 quarter" style="background-color:green;">test</div> 

CSS

html,body { 
    padding:0; 
    margin:0; 
    height:100%; 
    min-height:100%; 
} 

.quarter{ 
    width:50%; 
    height:100%; 
    float:left; 
} 
.contents{ 
    height:50%; 
    width:100%; 
}