如何使用 Bootstrap 使导航栏切换按钮/下拉菜单在"sm"屏幕尺寸下工作？

Question

我正在开发一个网站，我花了一天左右的时间试图让切换按钮以"sm"屏幕尺寸显示下拉菜单。如果您单击下面的指向我的 GitHub 网站的链接，您可以看到当您将屏幕尺寸最小化为"xs"(最大 767px(时，该按钮出现并正常运行，但在"sm"(768px 到 991px(中无法正常工作。Github网站

*如果从@media小查询中删除"可见性：隐藏;"，您将看到下拉列表显示在错误的位置。

Answer 1

我认为主要问题是有大量media-query规则纠缠在一起，因此很难追踪问题的原因。

但我注意到在您的styles.css文件中，您有：

@media (min-width: 768px) and (max-width: 991px) {
...
#nav-list {
visibility: hidden;
}
...
}

这就是列表隐藏在sm屏幕中的原因。但是，即使删除了它，仍然有一些样式使其行为不同(未垂直对齐(。我想您可能需要考虑稍微清理一下样式，并摆脱任何不需要的media-queries，希望问题的原因会立即显现出来。

Answer 2

问题出在您的样式表中，左边距 = -25px。因此，每当它进入该空间时，它就会出现在左边框旁边，但增加屏幕的宽度会很好。

我建议您使用左边距 = 0px。它会很好，就像其他尺寸的屏幕一样。

---your code
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
.navbar-brand h1{
font-size: 4vw;
margin: 35px 0 0 -25px;
}

使用这个

margin: 35px 0 0 0px;