Question

如何在Bootstrap中设置一个div，以便在“行”和“跨度”的正常12网格系统中跨越视口的整个宽度（没有固定定位）？

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

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

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

Answer 1

您可以通过将body和html标记的高度和宽度拉伸100％，然后将子div定义为相同的宽度来获得该效果。我们这样做是因为宽度和高度是相对的，所以如果我们在宽度/高度上定义100％的div，它只会延伸到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。

注意：.huge div的正文添加了一些额外的高度，因为padding-top已添加到正文以便为顶部导航栏腾出空间，如果删除填充它将成为“真正的”100％高度，而不是现在的100％高度+前60px。

Answer 2

如果你想利用Bootstrap 3网格并构建全宽度布局（将行拉伸到整个视口宽度），你应该考虑两件事：

Bootstrap的.row类将margin属性设置为：margin: 0 -15px;。
网格内容should be wrapped in a containing element以抵消上述保证金。

CSS

.container-full-width {
    padding: 0 15px; /* Offset .row's margin */
    width: 100%;
}
/* Optional. See comment below. */
.row {
    padding-left: 70px;
    padding-right: 70px;
}

HTML

<body>
  <div class="container-full-width">
    <div class="row">
      ...
    </div>
  </div>
...
</body>

请记住，.row元素没有边距，但可以通过覆盖.row类的填充属性并设置预期边距来修复。

或者，您可以考虑覆盖.row类并抵消边距值，但这需要为不同的媒体/设备类型设置不同的值。

值得检查它是否同样适用于Bootstrap 2。

在Twitter Bootstrap中将视口的整个宽度定位为div

2 个答案:

CSS

HTML