Html 如何在不影响导航栏折叠的情况下使用引导将边距权应用于导航栏？

目标：

我的目标是使用红色标记的填充或边距将导航条项目放置到此位置：

问题

我意识到，如果我应用了一些

右边距

或

右边距

，则折叠的（移动屏幕）

li

项目将应用

右边距

或

右边距

下面是一个荒谬的高

填充
应用的例子：


目标：

这是所需的输出：


最后，在响应模式下正确居中折叠
li
项目：


代码：


*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：20px；
}
navbar先生{
背景色：黑色！重要；
}
.导航栏.导航栏倒塌李{
文本对齐：居中；
边缘底部：20px；
}
.navbar nav>li{
右侧填充：30px；
}
李娜先生{
文字装饰：无；
文本转换：大写；
字体大小：70%；
颜色：#000；
}
navbar ul li a.先生{
位置：相对位置；
z指数：1；
填充：15px；
}







将这些媒体查询添加到css文件的末尾，您将得到想要的结果。我加了
右边距：100px由您自行决定。您可以自己指定所需的像素数。并增加了
右填充：0
删除移动设备的缩进以更好地居中显示菜单

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
      margin-right: 100px;
  }
}

@media (max-width: 992px) {
  .navbar-nav > li {
      padding-right: 0;
  }
}


*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：20px；
}
navbar先生{
背景色：黑色！重要；
}
.导航栏.导航栏倒塌李{
文本对齐：居中；
边缘底部：20px；
}
.navbar nav>li{
右侧填充：30px；
}
李娜先生{
文字装饰：无；
文本转换：大写；
字体大小：70%；
颜色：#000；
}
navbar ul li a.先生{
位置：相对位置；
z指数：1；
填充：15px；
}
@介质（最小宽度：992px）{
.导航栏展开lg.导航栏导航{
右边距：100px；
}
}
@介质（最大宽度：992px）{
.navbar nav>li{
右边填充：0；
}
}







要实现这一点，您可以做以下几件事：

正如您在问题中所建议的，您可以在导航栏的右侧添加边距，但您可以仅使用媒体查询在更大的屏幕上应用边距。下面的代码添加了一个媒体查询，该查询将仅在992px或更大的屏幕上应用此CSS（使用Bootstrap的
navbar expand lg
类时，您的navbar显示为全宽）：
参见工作示例：


*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：20px；
}
navbar先生{
背景色：黑色！重要；
}
.导航栏.导航栏倒塌李{
文本对齐：居中；
边缘底部：20px；
}
.navbar nav>li{
右侧填充：30px；
}
李娜先生{
文字装饰：无；
文本转换：大写；
字体大小：70%；
颜色：#000；
}
navbar ul li a.先生{
位置：相对位置；
z指数：1；
填充：15px；
}
@介质（最小宽度：992px）{
#navbarMenu{右边距：200px；}
}







您可以使用媒体查询仅在屏幕大小高于所需断点的情况下显示填充。但是，如果您告诉我们为什么要在菜单右侧添加如此大的填充，例如，您是否试图将其与其他内容分开，这可能会有所帮助？如果你解释这一点，我们可能会对如何实现你的目标有不同的建议。@FluffyKitten你好，感谢你的回答！我们的目标只是将80%的
宽度应用于
全屏
导航栏。我不喜欢把事情放在屏幕的边缘。
    @media (min-width: 992px) {
        #navbarMenu { margin-right: 200px; }       
    }