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

标签 css twitter-bootstrap twitter-bootstrap-3

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

enter image description here

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

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

最佳答案

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

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

map 列应该有这样的CSS:

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

see a working example here

关于css - 具有占用剩余视口(viewport)空间的列的自适应 Bootstrap 3 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32728988/

相关文章:

css - 在 bootstrap 侧边栏中隐藏特定元素

css - Resharper 是否告诉我 css 类是未知的,因为它在 CDN 上?

html - Bootstrap 导航栏不工作

html - 粘性 header 始终可见?

javascript - 第一次点击 href 时出现 .collapse() 错误

html - 添加 HTML 到 <h :messages/>

javascript - if 语句中的 jQuery 悬停函数

html - 使标题菜单固定位置(主题tesseract)

html - 如何在 Bootstrap 中垂直居中一个 div

html - 如何在不设置所有列表样式的情况下为导航栏着色?