Twitter bootstrap 如何使导航栏切换按钮/下拉菜单在“中”工作；sm"；使用引导的屏幕大小？

我在一个网站上工作，我花了一天左右的时间试图让切换按钮以“sm”屏幕大小显示下拉菜单。如果单击下面指向my GitHub网站的链接，您可以看到当您将屏幕大小最小化为“xs”（高达767px）时，该按钮会出现并正常工作，但在“sm”（768px到991px）中无法正常工作

---

*如果从小型@media查询中删除“visibility:hidden；”，您将看到下拉列表显示在错误的位置。

我认为主要的问题是有大量的

媒体查询

规则纠结在一起，很难找到问题的原因

但是我注意到在你的

style.css

文件中，你有：

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

---

这就是为什么列表隐藏在

sm

屏幕中的原因。但是，即使删除了它，仍然有一些样式使它的行为与所需的不同（不垂直对齐）。我想你可能想考虑一下清理样式，去掉任何不必要的<代码>媒体查询<代码>，希望问题的原因马上就会显现出来。

< p>问题在你的样式表中：<强>左边距= -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;

---

谢谢你的反馈。如果在浏览器编辑器中删除“可见性：隐藏”，您将看到菜单出现在一个奇怪的位置。不知道我做错了什么…但我会继续努力找出答案。谢谢分享。然而，你的建议并不能解决问题。