Question

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

我需要使左右列具有相同的高度，而不管其内容的数量。而且我想让正确的列填充容器的右侧。

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

请在bootply上查看以下演示。在下面的演示中，我已经设置了最小高度并且它使其无响应，因为当在小型设备上观看时左侧栏占据了巨大的空间。

任何建议都表示赞赏。

http://www.bootply.com/qWIEIbi93o

Answer 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

bootstrap css - 两列内容大小调整问题

1 个答案: