【发布时间】：2021-10-25 20:40:39
【问题描述】：
所以，以前我在导航栏上使用了“ml-auto”类，让我的下拉菜单一直向左推。但是，我不希望它在进入小屏幕时一直向左推，并且导航栏变为垂直方向。
我尝试为我的 NavDropdown 提供以下类和 ID：
className={styles.naviDropdown}
id='navigationDropdown'
并对其应用以下样式
.naviDropdown#navigationDropdown {
margin-left: auto !important;
}
@media (max-width: 768px) {
.naviDropdown#navigationDropdown {
margin-left: 0 !important;
}
}
因此，这似乎可以很好地工作，但不幸的是，事实并非如此。这样做会使网站完全无视任何 CSS，并使我的导航栏看起来很古怪且间距均匀，而不是使我的链接左对齐，导航栏右对齐。
我通过检查器发现，由于某种原因，id 被应用于由 React Bootstrap 生成的 a 元素，而不是被赋予适当类的包含 div。
有什么想法吗？
任何帮助将不胜感激，如果我需要提供更多信息，请告诉我！
编辑： 我尝试以 Github discussion 中指定的方式重新格式化我的代码，但不幸的是，我的问题仍然存在 - 将 ID 分配给了“a”元素，而不是下拉 div。
【问题讨论】：
-
@brc-dd 刚刚试了一下！我尝试更改我的代码以匹配这两种方法，不幸的是，我仍然遇到同样的问题。也许这是 React-Bootstrap 库的问题？
-
请显示更多您的代码。不清楚为什么将类应用于容器元素。此外，包含 ID 的选择器的类部分是没有意义的。无论如何，ID 都必须是唯一的。
标签： reactjs bootstrap-4 next.js react-bootstrap