bootstrap css - 两列内容大小问题答案

【问题标题】：bootstrap css - two column content sizing issuebootstrap css - 两列内容大小问题
【发布时间】：2014-06-08 20:12:05
【问题描述】：

我的网页主要区域有两列。左边是包含链接的侧栏。右一个包含基于链接目标的内容。

我需要使左右两列具有相同的高度，无论其内容的数量如何。而且我想让右列填充容器的右侧。

我认为给出最小高度或宽度会使设计无响应？

请看下面的 bootply 演示。在下面的演示中，我设置了 min-height 并且它使其无响应，因为在小型设备上查看时左侧栏占据了巨大的空间。

欢迎提出任何建议。

http://www.bootply.com/qWIEIbi93o

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

一种解决方案是使用 CSS flexbox 和媒体查询，以便 equal 类仅适用于更大的屏幕宽度..

@media screen and (min-width: 768px) {
  .equal, .equal > div[class*='col-'] {  
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex:1 1 auto;
  }
}

更新的 Bootply：http://www.bootply.com/lyqtWesQhC

【讨论】：