如何在Bootstrap 5导航栏中为每个按钮添加间距？

有两种简单的方法可以实现导航栏按钮之间的分隔间距，优先推荐使用Bootstrap内置工具类，避免额外CSS：

方案1：使用Bootstrap内置间距类 #

直接给每个.nav-item添加右侧间距类，控制按钮间的水平间隔：

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body">
<div class="container">
    <a class="navbar-brand" href="">
        <h3>Brand</h3>
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item me-2"><a class="btn btn-primary shadow-sm" aria-current="page" 
            href="{% url 'About' %}">About</a></li>
            <li class="nav-item me-2"><a class="btn btn-primary shadow-sm" 
                href="{% url 'login' %}">Log in</a></li>
            <li class="nav-item"><a class="btn btn-primary shadow-sm" 
                href="{% url 'register' %}">Sign Up</a></li>  
        </ul>
    </div>
</div>
</nav>

• me-2是Bootstrap的间距缩写，对应margin-right: 0.5rem，你可以根据需求调整数值：比如me-3对应0.75rem，me-4对应1rem
• 如果希望仅在大屏（≥992px，即navbar展开状态）显示间距，小屏折叠后取消，可将me-2替换为me-lg-2

方案2：自定义CSS（灵活控制） #

如果内置工具类无法满足需求，可添加自定义CSS规则：

/* 给除最后一个外的所有按钮添加右侧间距 */
.navbar-nav .nav-item:not(:last-child) .btn {
    margin-right: 1rem; /* 自定义间距大小 */
}

/* 小屏折叠状态下，改为垂直间距 */
@media (max-width: 991px) {
    .navbar-nav .nav-item:not(:last-child) .btn {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

HTML结构保持你原有的代码即可，无需额外修改。

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