如何在Navbar折叠状态下访问元素并调整margin-right属性？

嘿，我完全懂你遇到的麻烦！你给Navbar第一个<li>设置的margin-right:50px在水平展开状态下布局很舒服，但当窗口缩小、Navbar折叠成垂直菜单后，这个右边距会让第一个元素向右偏移，甚至覆盖其他内容——毕竟垂直堆叠的菜单里，元素根本不需要右边距来调整布局嘛。

问题根源 #

你之前写的样式是全局生效的：nav div ul li:first-child{ margin-right: 50px; }，但Bootstrap的Navbar在折叠状态下（屏幕宽度小于navbar-expand-sm对应的576px断点），菜单会切换为垂直排列，这个全局的右边距就成了布局bug的元凶。

两种实用解决方案 #

方案1：仅在Navbar未折叠时应用右边距

利用Bootstrap的断点媒体查询，只在屏幕宽度足够（Navbar处于水平展开状态）时才给第一个li设置margin-right：

/* 仅当屏幕宽度≥576px（navbar-expand-sm的断点）时生效 */
@media (min-width: 576px) {
  nav div ul li:first-child {
    margin-right: 50px;
  }
}

.collapse { 
  direction: rtl; 
}

这样在折叠状态下（屏幕<576px），这个右边距就不会被应用，垂直菜单的布局自然恢复正常。

方案2：针对折叠展开后的菜单重置margin

当你点击汉堡图标展开折叠菜单时，Bootstrap会给.collapse容器自动添加一个.show类，我们可以利用这个类精准定位折叠展开后的第一个li，直接重置它的右边距：

nav div ul li:first-child{ 
  margin-right: 50px; 
} 

.collapse { 
  direction: rtl; 
}

/* 当折叠菜单展开时，清零第一个li的右边距 */
.navbar-collapse.show ul.navbar-nav li:first-child {
  margin-right: 0;
}

这个方法更灵活，不管屏幕尺寸如何，只要是展开的折叠菜单，第一个li的右边距都会被重置，彻底解决覆盖问题。

额外小提示 #

我发现你代码里第三个<a>标签的闭合写错了：

<a class="nav-link text-white" href="#">product<a>

记得改成正确的闭合标签：

<a class="nav-link text-white" href="#">product</a>

这个小疏忽也可能影响布局稳定性，修正后会更稳妥！

内容的提问来源于stack exchange，提问作者Mohammad