twitter-bootstrap Bootstrap 在 div 内固定导航栏
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14742906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap fixed navbar inside div
提问by einundswanzig
In bootstrap documentationthey're able to "trap" a .navbar-fixed-topinside their .bs-docs-examplediv:
在引导程序文档中,他们能够.navbar-fixed-top在他们的.bs-docs-examplediv 中“捕获”a :
<div class="bs-docs-example bs-navbar-top-example">
<div class="navbar navbar-fixed-top" style="position: absolute;">
<div class="navbar-inner">
[...]
But if I do the same in my test page the navbar "escapes" the div and get fixed in the top of the body, not the top of the div. How it's the trick achieved?
但是如果我在我的测试页面中做同样的事情,导航栏会“转义”div 并固定在正文的顶部,而不是 div 的顶部。它的诀窍是如何实现的?
回答by einundswanzig
Ok figured it out. The parent element container must have position: relative, and navbar must have position: absolute, that way if you attach either .navbar-fixed-topor .navbar-fixed-bottomit will get fixed relative to the parent element and NOT relative to the entire page. Yeah!
好吧想通了。父元素容器必须具有position: relative,并且导航栏必须具有position: absolute,如果您附加其中任何一个,.navbar-fixed-top否则.navbar-fixed-bottom它将相对于父元素而不是相对于整个页面固定。是的!
回答by json4rest
<div class="container-fluid">
<div class="container">
<nav class="navbar">...</nav>
</div>
</div>
That works with built-in Bootstrap's CSS.
这适用于内置的 Bootstrap 的 CSS。

