css - 具有占用剩余视口(viewport)空间的列的自适应 Bootstrap 3 网格

Question

我正在尝试实现这样的效果:

固定宽度的自适应容器，两个 50% 的列。左边的列可以通过.container来约束，但是右边的列需要向外延伸到viewport的边缘。

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

Answer 1

你可以做的是，为需要添加 map 的行引入一个包含元素(在 .container closing 之后)并将位置设置为 relative。

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

map 列应该有这样的CSS:

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

see a working example here