我试图将我的单页网站的一部分(使用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;
}
谢谢你的帮助！
解决方法
如果我理解你在问什么,这里是你如何将你的引导分成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%;
}
