使Twitter Bootstrap导航栏在崩溃时返回页面顶部

Question

我想知道在这种情况下最佳做法是什么。我在Twitter引导程序页面中有一个导航栏，在桌面上查看时页面上方有内容。当屏幕宽度足够低时，导航栏会折叠，但在折叠后导航栏处于相同位置，但我希望它在折叠后位于页面顶部。最好的方法是什么？

以下是我的演示：http://www.bootply.com/61283

Answer 1

假设您正在使用导航栏的标准Bootstrap导航折叠，您可以将“visible-desktop”用于仅限桌面的内容：

<div class="container visible-desktop">Desktop only content above nav..</div>

在较小的屏幕上，这将不显示，因此导航栏将显示在顶部。

Demo 1

编辑（替代）：

另一种方法是使用@media查询并将CSS更改为在较小屏幕上定位元素..

@media (max-width: 767px) { 
    .navbar{
        position:absolute;
        top:0;
    }
    #topContent{
        margin-top:45px;
    }
}

Demo 2