Bootstrap 3: podzielona strona na cztery równe części

Question

Próbuję podzielić część mojej strony jednostronicowej (używając Bootstrap 3) na 4 równe części, ale nie mogę jej uruchomić.

Pomyślałem, że mogę dodać dodatkowe klasy do każdego col-md-6, ale problem polega na tym, że wysokość jest dopasowana do zawartości i nie mogę użyć stałych wysokości, ponieważ powinna być responsywna ...

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

Moja custom.css wygląda następująco:

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

Dzięki za pomoc!

Answer 1

Jeśli rozumiem, o co pytasz, oto jak podzielić bootstrap na 4 równe części. Wysokości dostosują się do wysokości kolumny z największą (najwyższą) zawartością.

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

edycja: Roztwór do 4 równe ćwiartki

Zobacz pracuje Bootply tutaj http://www.bootply.com/qmwjea4pG3#

Przykład Poniżej

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