twitter-bootstrap - 使 Twitter Bootstrap 导航栏在折叠时转到页面顶部

Question

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

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

Answer 1

Assuming you're using the standard Bootstrap nav-collapse for the navbar, you could use the 'visible-desktop' for the desktop-only content:

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

On smaller screens this will not show, and as a result the navbar will display at the top.

Demo 1

EDIT (alternative):

An alternative method would be to use @media queries and change the CSS to position elements on the smaller screens..

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

Demo 2