我正在使用 bootstrap 来设计我的网站,它几乎在每个级别上都运行良好,但我无法像在 Github 示例中那样让导航栏下推所有其他元素。
这是我的导航栏的样子,几乎与示例中的相符。我不知道有什么不同。
<html>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/MiZZqIZ.png" alt="logo"></a>
<div class="nav-collapse collapse">
<span style="font-size:2em">
<ul class="nav">
<li><a href="/videohandler">Upload</a></li>
<li><a href="/about">About</a></li>
</ul>
</span>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- all my code -->
</body>
</html>
更新:
这是 Github example我指的是,如果您将浏览器缩小,它只会显示“品牌”元素,并将其余元素放在最右侧的下拉列表中。在示例中,当它向下滑动时,它也会将其下方的 div 向下推相同的量。这是在我的元素上向下滑动,但没有向下推它下面的 div。在我身上,它只是直接向下并覆盖它们。
最佳答案
如果您希望在打开折叠菜单(下拉菜单)时向下推其他元素,您必须将代码第一个 div 中的类“navbar-fixed-top”替换为类“navbar-static-” top' 或通过在代码的头部部分添加以下行(在链接到 'bootstrap.css' 之后)重新定义 '.navbar-fixed-top' 的位置属性:
<style>
.navbar-fixed-top{position:relative;}
</style>
解释: “.navbar-fixed-top”和“.navbar-fixed-bottom”类在“bootstrap.css”中将它们的位置属性设置为“fixed”,因此它们从正常流程中取出。您必须覆盖/重新定义此设置,以便将这些元素置于正常流程中,并在菜单从折叠状态打开时将您的内容向下推。这可以通过将具有“.navbar-fixed-”类的元素的 css-property“位置”设置为“相对”或通过将“.navbar-fixed-”替换为“.navbar”来完成-静止的-*'。 (后者在“bootstrap.css”中的位置已经设置为“相对”。)
关于html - 如何让 Twitter Bootstrap 导航下拉菜单下推其他元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17867818/