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

【问题标题】：Make Twitter Bootstrap navbar go to top of page on collapse使 Twitter Bootstrap 导航栏在折叠时转到页面顶部
【发布时间】：2018-04-06 19:46:09
【问题描述】：

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

【问题讨论】：

【解决方案1】：

假设您使用标准 Bootstrap nav-collapse 作为导航栏，您可以将“visible-desktop”用于仅桌面内容：

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

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

编辑（替代）：

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

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

【讨论】：