css - 在 Twitter Bootstrap 中定位 div 视口(viewport)的整个宽度

Question

如何在 Bootstrap 中设置 div 样式以在“行”和“跨度”的正常 12 网格系统中跨越视口(viewport)的整个宽度(没有固定定位)？

在 Bootstrap 源代码中，navbar-fixed-top 类使用固定位置和 left 和 right 属性实现此效果:

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  margin-bottom: 0;
}

但是，无论滚动如何，此导航栏都保留在窗口中。在没有固定定位的情况下实现相同的整个视口(viewport)宽度需要哪些样式？

Answer 1

您可以通过将 body 和 html 标记的高度和宽度拉伸(stretch) 100%，然后将子 div 定义为相同的宽度来获得这种效果。我们这样做是因为宽度和高度是相对的，所以如果我们定义一个宽度/高度为 100% 的 div，它只会拉伸(stretch)到 body 和 html 标记。看看这个例子:

html, body {
    width:100%;
    height:100%;
}

body {
    padding-top:60px;
}

.wrapper {
    height: 100%;
    width: 100%;
}

.huge {
    width:100%;
    height:100%;
    background-color:#eee;
}

Demo , 编辑 here .

注意:由于 padding-top 添加到正文，.huge div 的正文增加了一些额外的高度为顶部导航栏让路，如果删除该填充，它将变为“真正的”100% 高度，而不是现在的 100% 高度 + 顶部 60px。