html – 带引导的CSS布局

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

导读：我有以下html代码： div class="container" div class="row row1" div class="col col1 col-md-3" Column 1 /div div class="col col2 col-md-3" Column 2 /div div class="col col3 col-md-3" div class="row" Column 3 /div div class="row" Column 4 /div

我有以下html代码：

<div class="container">
  <div class="row row1">
      <div class="col col1 col-md-3">
          Column 1
      </div>
      <div class="col col2 col-md-3">
          Column 2 
      </div>
      <div class="col col3 col-md-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>

我使用引导网格布局,我想实现这样的东西：

想法是col1和col2应该与col3和col4的高度相同.

有没有这样做的方式,没有指定容器的高度,并设置高度100％的子元素,就像我在这个例子？

https://jsfiddle.net/t1uo6mvt/4/

解决方法

阅读： How can I make Bootstrap columns all the same height?

您可以使用：

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

这是一个可运行的例子：

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.row1 {
  height: 100%;
}

.col1{
  background-color: red;
  color: white;
  height: 100%;
}

.col2{
  background-color: green;
  color: white;
  height: 100%;
}

.col3{
  background-color: yellow;
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row row1">
      <div class="col col1 col-xs-3">
          Column 1
      </div>
      <div class="col col2 col-xs-3">
          Column 2 
      </div>
      <div class="col col3 col-xs-3">
          <div class="row">
              Column 3
          </div>
          <div class="row">
              Column 4
          </div>
      </div>
  </div>
</div>

（编辑：李大同）

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