如何在 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)宽度需要哪些样式?
最佳答案
您可以通过将 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;
}
注意:由于 padding-top
添加到正文,.huge
div 的正文增加了一些额外的高度为顶部导航栏让路,如果删除该填充,它将变为“真正的”100% 高度,而不是现在的 100% 高度 + 顶部 60px。
关于css - 在 Twitter Bootstrap 中定位 div 视口(viewport)的整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10327231/