Question

我正在使用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。在我的身上它只是直接向下并覆盖它们。

Answer 1

如果您希望在折叠菜单打开时向下推送其他元素（下拉列表），则必须更换类＆＃39; navbar-fixed-top＆＃39;在代码的第一个div中，使用类＆＃39; navbar-static-top＆＃39;或重新定义＆＃39; .navbar-fixed-top＆＃39;的位置属性。通过在代码的head-section中添加以下行（在链接到＆＃39; bootstrap.css＆＃39;之后）：

    <style>
        .navbar-fixed-top{position:relative;}
    </style>

说明：课程＆＃39; .navbar-fixed-top＆＃39; ＆安培; ＆＃39; .navbar固定底＆＃39;将他们的职位属性设置为“固定”状态。在＆＃39; bootstrap.css＆＃39;中，它们从正常流程中取出。您必须覆盖/重新定义此设置才能将这些元素置于正常流程中，并在菜单从折叠状态打开时将内容向下推送。这可以通过设置css-property＆＃39; position＆＃39;来实现。使用＆＃39; .navbar-fixed- ＆＃39;上课到相对＆＃39;或者通过替换“.navbar-fixed - ＆＃39;使用＆＃39; .navbar-static - *＆＃39;。（后者的位置已经设置为＆＃39; bootstrap.css＆＃39;。）

Answer 2

虽然在这种背景下“推下”是什么意思并不是很清楚，但基于使用导航栏修复，我猜你的意思是它掩盖了你的内容。这是一个简单的修复 - 只需在你的身体元素添加一些填充。 60px通常有效。

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

Answer 3

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

有关其工作原理的概括，我建议您查看引导页面上的示例。

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

如何获取Twitter Bootstrap导航下拉列表以推送其他元素

3 个答案: