html – Bootstrap 3：分为四个相等的页面

概述我试图将我的单页网站的一部分(使用Bootstrap 3)分成4个相等的部分,但我无法让它工作. 我想我可以为每个col-md-6添加额外的类,但问题实际上是高度与内容对齐,我不能使用固定的高度,因为它应该响应… <section> ... </section><section id="theproject" class="project"> <div class="cont 我试图将我的单页网站的一部分(使用bootstrap 3)分成4个相等的部分,但我无法让它工作.

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

<section>  ...  </section><section ID="theproject" >    <div  >		<div >	    	<div >	    	</div>		        topleft			<div >				topRIGHT			</div>    	</div>				<div >    		<div >       		    BottOMleft    		</div>			    		<div >     		    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 >      <div >        content      </div>      <div >        content      </div>      <div >      content      </div>      <div >      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 ><div  >test</div><div  >test</div><div  >test</div><div  >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%;}

总结

以上是内存溢出为你收集整理的html – Bootstrap 3：分为四个相等的页面全部内容，希望文章能够帮你解决html – Bootstrap 3：分为四个相等的页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。