html - 如何让 Twitter Bootstrap 导航下拉菜单下推其他元素

标签 html css twitter-bootstrap

我正在使用 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/

相关文章:

javascript - 用动画显示隐藏的 div

jquery - 使用 mandrill 发送邮件

css - 需要一些反馈 : Customizing JBoss-Portal with CSS

javascript - 添加一个 "not solid"的 div

javascript - 所需输入的 Bootstrap 加载状态问题

javascript - 缓存 html .load 结果以加快加载速度

css - 有没有办法覆盖 CSS 规则以从根本上否定它?

html - 防止 Bootstrap parent 也崩溃 child 崩溃?

jquery - ASP.NET MVC - 应用了一种样式,未应用另一种样式

javascript - Bootstrap 模式表单未提交