具有列的自适应引导程序3网格，占用剩余的视口空间

Question

我试图达到这样的效果：

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

使用Bootstrap网格是否有正确的方法来实现这一目标？

Answer 1

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

然后在里面添加另一个容器和行，它将维护当前的网站结构。使地图列定位为绝对和右：0，以便它占用右侧视口的所有空间。

地图列应该有这样的css：

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

see a working example here

Answer 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