0

我正在使用引导程序来设计我的网站，它几乎在每个级别都运行良好，但我无法像在 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 示例，如果您将浏览器缩小，它将仅显示“品牌”元素，并在最右侧的下拉列表中显示其余元素。在示例中，当它向下滑动时，它也会将其下方的 div 向下推相同的量。这是在我的项目上向下滑动，但没有向下推它下面的 div。在我的身上，它只是直接向下并覆盖它们。

4

3 回答 3

2

如果您想在折叠菜单打开（下拉菜单）时将其他元素向下推，则必须将代码第一个 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-static-*”来完成。（后者在“bootstrap.css”中的位置已经设​​置为“相对”。）

于 2014-11-01T15:30:00.270 回答
0

虽然在这种情况下“下推”是什么意思并不十分清楚，但基于 navbar-fixed 的使用，我猜你的意思是它正在掩盖你的内容。这是一个简单的修复——只需在你的 body 元素中添加一些填充。60px 通常有效。

除非这不是您的问题，否则在这种情况下，指向 JSFiddle 的链接，甚至指向您在“Github 示例”上所谈论的内容都会很好。

于 2013-07-25T20:13:34.743 回答
-2

Bootstrap 使用脚手架系统，使用行类和跨度 1-12 是结构的基础。

对于它如何工作的概括，我建议您查看引导页面上的示例。

http://twitter.github.io/bootstrap/getting-started.html#examples

于 2013-07-25T20:18:15.330 回答