html – 带引导的CSS布局

您可以使用：

.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>