如何在bootstrap

Question

我正在创建一个个人网站，我想确保它们在具有不同屏幕尺寸的设备上看起来很好。我有一个项目页面，根据查看的设备，它将有不同的布局。

在桌面屏幕中，我想要一个垂直navbar，当用户向下滚动页面时，它会向下滑动，并包含跳转到该页面中特定位置的链接。

但是，在手机屏幕中，我想要完全移除垂直navbar，并且在主navbar下面只有一个水平navbar，然后每个部分都会有一个箭头返回到页面顶部。这样，用户就可以从水平navbar中选择一个链接，完成后只需点击返回顶部箭头，然后在navbar上选择下一个链接即可。

为实现这一目标，我计划用所述布局创建两个pages.html和mprojects.html页面。但是，如何根据.html中的屏幕尺寸选择这两个bootstrap文件？

Answer 1

您可以使用两个导航栏创建一个单独的HTML文件，而不是创建两个单独的HTML文件，并使用响应式CSS显示/隐藏它们。

.vertical-nav {
    position: fixed; // To keep it "sticky" when the user scrolls
}

.horizontal-nav {
    display: none;
}

@media (max-width: 768px) { // This can be whichever px value suits your site

    .vertical-nav {
        display: none;
    }
    .horizontal-nav {
        display: block;
    }

}

只需确保将导航栏的类别分别设置为“vertical-nav”和“horizo​​ntal-nav”。