Bootstrap 3: chia trang thành bốn phần bằng nhau

Question

Tôi đang cố gắng chia một phần của trang một trang của mình (sử dụng Bootstrap 3) thành 4 phần bằng nhau nhưng tôi không thể làm việc đó.

Tôi nghĩ rằng tôi chỉ có thể thêm các lớp bổ sung cho mỗi col-md-6 nhưng vấn đề thực sự là chiều cao được căn chỉnh với nội dung và tôi không thể sử dụng chiều cao cố định vì nó phải đáp ứng ...

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

custom.css của tôi trông như thế này:

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

Cảm ơn sự giúp đỡ của bạn!

Answer 1

Nếu tôi hiểu những gì bạn đang yêu cầu, đây là cách bạn có thể chia bootstrap của bạn thành 4 phần bằng nhau. Chiều cao sẽ điều chỉnh để phù hợp với chiều cao của cột có nội dung cao nhất (cao nhất).

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

EDITED: Giải pháp cho 4 góc phần tư bằng

Xem làm việc Bootply đây http://www.bootply.com/qmwjea4pG3#

Ví dụ Dưới

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