具有占用剩余视口空间的列的自适应 Bootstrap 3 网格答案

【问题标题】：Adaptive Bootstrap 3 grid with column that takes up remaining viewport space具有占用剩余视口空间的列的自适应 Bootstrap 3 网格
【发布时间】：2015-09-23 10:58:22
【问题描述】：

我正在尝试达到这样的效果：

固定宽度自适应容器，两列 50%。左列可以被.container约束，但右列需要向外延伸到视口的边缘。

是否有使用 Bootstrap 网格实现此目的的正确方法？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以做的是，对于需要添加地图的行，引入一个包含元素（在 .container 关闭之后）并将位置设置为相对。

然后在其中添加另一个容器和行，以保持当前的网站结构。使地图列定位为绝对和 right:0 以便它占据右侧视口的所有空间。

地图列应该有类似这样的css：

.make-absolute {
  position:absolute;
  right:0;
  top:0;
}

see a working example here

【讨论】：

【解决方案2】：

你需要让你的第二列成为你溢出元素的容器

<div class="row">
 <div class="col-md-6"></div>
 <div class="col-md-6 mapContainer">
  <div class="map">
   OVERFLOWING CONTENT
  </div> 
 </div>
</div>

在css中，打开容器上的溢出，并给你的地图一个宽度。

.mapContainer {
  overflow: visible; 
}

.map {
  width:50vw;
}

应该这样做。 http://codepen.io/anon/pen/gawOeB?editors=110

【讨论】：

这是个好主意，但是我需要巧妙地调整.map 的大小以填充剩余的视口空间，而不是以固定宽度延伸过去。这个概念可以与 JS 测量剩余视口宽度一起使用，但更喜欢纯 CSS 解决方案。
在这种情况下，使用 width:50vw 作为地图。它将占据视口宽度的 50%，这应该可以满足您的需求。