Css 导航栏项目之间的引导响应空间

我正在使用Bootstrap开发一个简单的Web应用程序，我需要使导航栏项目之间的空间具有响应性，以便在较小的屏幕中导航栏项目彼此靠近，但在较大的屏幕中，导航栏项目彼此之间的距离更远

以下是我目前所做的：

.title{
字体系列：-苹果系统、BlinkMacSystemFont、Segoe UI、Helvetica、Arial、无衬线字体、苹果颜色表情符号、Segoe UI表情符号；
字号：26px；
线高：1.25；
}
.btn bd登录{
字号：600；
颜色：白色；
}
.btn bd注册{
字号：600；
颜色：白色；
边框颜色：白色；
}
.btn bd注册：悬停{
字号：600；
颜色：黑色；
边框颜色：白色；
背景色：白色；
}
.家庭btn{
字号：600；
颜色：白色！重要；
}
.home btn：悬停{
字号：600；
颜色：#212529！重要；
}
身体{
高度：100vh；
背景：线性梯度（向右，#33ccff 0%，#ff99cc 100%）；
}
按钮，按钮：激活，按钮：聚焦{
背景：无！重要；
边界：无；
}
按钮：悬停{
边框底部：3px实心#0275d8；
}

轮廓


统计


民意测验


设置

您的

nav

仅限于

div

的容器大小。如果删除

auto

类并添加

w-100

以获得全宽并添加一些

flex

类，则可以拉伸nav

例如：

轮廓


统计


民意测验


设置

如您所愿，间距实用程序类（填充和边距）是响应性的。例如

px-lg-5 px-sm-3 px-1

根据屏幕宽度相应地应用填充

• 大型及以上，5个左/右填充单元
• sm和md，3个左/右填充单元
• xs，1个左/右填充单元

因此，

导航项目

<ul class="navbar-nav">
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Profile</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Statistics</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Polls</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Settings</button>
    </li>
</ul>

轮廓


统计


民意测验


设置

当然，您可以根据需要更改

p-{breakpoint}-{value}

---

您有输出的线框是的，我要添加图像这几乎是正确的，问题是现在移动设备上导航栏太偏右了，我仍然不明白为什么，（谢谢）。@AndreaDattero您能展示一张图像吗。一张图片需要100个字。谢谢！：）是的，我已经添加了一个图片，但是我们已经有了一个关于这个主题的验证答案，无论如何，谢谢你的帮助@很高兴你找到了答案！是的，我现在突然发现我不应该把px-lg-5类和导航栏导航类放在一起，但是对于导航栏链接类，这完全解决了问题！