html - Bootstrap - 具有 100% 高度的响应式行和列

Question

我正在尝试制作一个响应式网站，这是我在 desktop version .随着intended mobile version like so.

因为我试图让列在我的浏览器中填充 100% 的高度，所以我更改了一些 Bootstrap 代码。如果我的 css 是，我应该在我的代码中更改什么

    html,body,.container{
        height:100%;
    }

    .container{
        display:table;
        width: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid black;
        padding: 0 0 0 0;
        margin: 0 0 0 0;    
    }
    .row
    {
        height: 100%;
        display: table-row;
    }
    .col-xs-6.no-float{
        display: table-cell;
        width: 50%;
        padding: 0 0 0 0;
        float: none;
    }

Answer 1

这是错误的想法，不应更改 Bootstrap 类。使用自定义类编写自定义 css。

    <div class="container full-height-container">
  <div class="row full-height-row">
    <div class="col-md-6 col-xs-12  left full-height-col">
      <div class="row">
        <div class="col-md-4">
          c1
        </div>
         <div class="col-md-4">
          c2
        </div>
         <div class="col-md-4">
          c3
        </div>
      </div>
    </div>
    <div class="col-md-6 col-xs-12 right full-height-col">
      test2
    </div>
  </div>
</div>


html,body{
  height: 100%;
}

.left{
  background: red;
}

.right{
  background: yellow;
}

.full-height-container{
  height: 100%;
}

.full-height-row{
  height: 100%;
}

.full-height-col{
  height: 100%;
}

看看:fiddle