Bootstrap 3：分割四个相等的页面

Question

我正在尝试将我的单页网站的一部分（使用Bootstrap 3）分成4个相等的部分，但我无法让它工作。

我以为我可以为每个col-md-6添加额外的类但问题实际上是高度与内容对齐而且我不能使用固定的高度，因为它应该是响应...

<section>
  ...
  
</section>

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

我的custom.css看起来像这样：

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

感谢您的帮助！

Answer 1

如果我理解你在问什么，这里是你如何将你的引导分成4个相等的部分。高度将调整以匹配列的高度与最高（最高）的内容。

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

已编辑：4个相等象限的解决方案

在这里查看Bootply的工作原理 http://www.bootply.com/qmwjea4pG3#

以下示例

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