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

发布时间：2020-12-14 18:28:36 所属栏目：资源来源：网络整理

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

我试图将我的单页网站的一部分(使用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%;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!