使用Flask与Bootstrap4.4.1实现导航栏首页按钮与其他按钮分隔求助

我想要将导航栏的首页按钮与其他按钮分隔开，在网上搜索了多种方案都没有达到预期效果。我当前使用的开发框架为Flask，前端使用Bootstrap 4.4.1版本。

• 我的导航栏当前效果：
• 我想要实现的导航栏效果：

我的导航栏相关代码如下：

<span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar">
      <div class="navbar-nav ml-auto">
        {% if user.is_authenticated %}
        <a class="nav-item nav-link" id="home" href="/">Home</a>
        <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
        <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
        {% else %}
        <a class="nav-item nav-link" id="home" href="/">Home</a>
        <a class="nav-item nav-link" id="login" href="/login">Login</a>
        <a class="nav-item nav-link" id="signUp" href="/sign-up">Sign Up</a>
        <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
        {% endif %}
      </div>
  </div>
</nav>

如果需要查看更多代码可以告知，恳请各位帮忙提供可行方案，非常感谢。

实现方案 #

以下两种方案均适配Bootstrap 4.4.1版本，无需额外编写自定义CSS，使用框架自带工具类即可实现需求：

方案1：带分隔线的间距效果 #

给首页按钮添加右侧边框和对应的内、外边距即可实现视觉分隔，修改后的代码片段如下：

{% if user.is_authenticated %}
<a class="nav-item nav-link border-right pr-3 mr-3" id="home" href="/">Home</a>
<a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
<a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
{% else %}
<a class="nav-item nav-link border-right pr-3 mr-3" id="home" href="/">Home</a>
<a class="nav-item nav-link" id="login" href="/login">Login</a>
<a class="nav-item nav-link" id="signUp" href="/sign-up">Sign Up</a>
<a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
{% endif %}

工具类说明：

• border-right：添加右侧边框作为分隔线
• pr-3：设置右内边距为1rem，避免文字紧贴分隔线
• mr-3：设置右外边距为1rem，拉开和后续按钮的间距
  如果觉得分隔线颜色过深，可以额外添加border-light类调整边框透明度，也可以根据实际需求调整间距数值（如把pr-3 mr-3改为pr-2 mr-2缩小间距）。

方案2：纯空白间距分隔 #

如果不需要分隔线，仅用空白拉开两个部分的距离，可以拆分导航组实现：

<div class="collapse navbar-collapse" id="navbar">
  <!-- 首页单独放在第一个导航组 -->
  <div class="navbar-nav">
    <a class="nav-item nav-link" id="home" href="/">Home</a>
  </div>
  <!-- 剩余按钮放在第二个导航组，用ml-auto实现整体靠右 -->
  <div class="navbar-nav ml-auto">
    {% if user.is_authenticated %}
    <a class="nav-item nav-link" id="logout" href="/logout">Logout</a>
    <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
    {% else %}
    <a class="nav-item nav-link" id="login" href="/login">Login</a>
    <a class="nav-item nav-link" id="signUp" href="/sign-up">Sign Up</a>
    <a class="nav-item nav-link" id="about-us" href="/about-us">About Us</a>
    {% endif %}
  </div>
</div>

如果不需要所有非首页按钮靠右对齐，把ml-auto改为ml-4即可实现所有按钮左对齐、首页和其他按钮固定间距分隔的效果。

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