3

您如何在 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;
}

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

4

2 回答 2

4

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

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

body {
    padding-top:60px;
}

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

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

演示，在这里编辑。

注意.huge：由于padding-top添加到主体以为顶部导航栏让路，因此向div的主体添加了一些额外的高度，如果删除该填充，它将成为“真实”的 100% 高度而不是 100% 高度 +现在的前 60px。

于 2012-04-27T13:40:04.140 回答
0

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

  1. Bootstrap 的.row类将 margin 属性设置为：margin: 0 -15px;。
  2. 网格内容应包含在包含元素中以抵消上述边距。

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。

于 2014-01-06T16:25:56.083 回答