Html Bootstrap 3：将页面分成四个相等的部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27825814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: split page in four equal parts
提问by zwickzwack
I'm trying to split a section of my one-page site (using Bootstrap 3) into 4 equal parts but I can't get it to work.
我试图将我的单页网站的一部分（使用 Bootstrap 3）分成 4 个相等的部分，但我无法让它工作。
I thought I could just add extra classes to each col-md-6 but the problem is actually that the height is aligned to the content and I can't use fixed heights because it should be responsive...
我以为我可以为每个 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>My custom.css looks like this:
我的 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;
}Thanks for your help!
谢谢你的帮助！
回答by MrGood
If I understand what you are asking, here is how you can split your bootstrap into 4 equal parts. The heights will adjust to match the height of the column with the most(tallest) content.
如果我明白你在问什么，这里是你如何将你的引导程序分成 4 个相等的部分。高度将调整以匹配具有最高（最高）内容的列的高度。
Here is the Bootply so you can try it out.
HTML
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
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: Solution for 4 equal quadrants
已编辑：4 个相等象限的解决方案
See the working Bootply here http://www.bootply.com/qmwjea4pG3#
在此处查看工作的 Bootply http://www.bootply.com/qmwjea4pG3#
Example Below 
下面的例子
HTML
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
CSS
html,body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
.quarter{
width:50%;
height:100%;
float:left;
}
.contents{
height:50%;
width:100%;
}
