如何让Bootstrap导航栏标签完全铺满空间消除多余空白

问题原因 #

你当前的导航栏无法均匀填充剩余宽度是两个核心问题导致的：

• 包裹导航项的父容器没有占满Home链接右侧的全部可用空间
• 导航列表本身没有开启自动填充配置，同时你给每个导航项添加的固定栅格类限制了宽度拉伸

修改方案 #

按照以下步骤调整代码即可：

1. 将Home标签之后的外层容器d-flex justify-content-between替换为flex-grow-1，让该容器自动填充剩余宽度
2. 给navbar-nav容器添加w-100和nav-fill类，开启导航项自动均匀分布效果
3. 删除所有nav-link上的col-xs-1 col-sm-1 col-lg-1、mx-auto这类限制宽度的类
4. 修复原代码中Tab2的href属性缺少闭合引号的语法错误

调整后的完整代码 #

<nav class="nav nav-fill navbar-expand-lg navbar-dark bg-dark sticky-top container-fluid">
  <a class="navbar-brand mr-4 ml-4" href="#"><b>Home</b></a>
  <div class="flex-grow-1">
    <div class="navbar-nav w-100 nav-fill">
      <a class="relative nav-item nav-link" href="#">Tab 1</a>
      <a class="nav-item nav-link" href="#">Tab 2</a>
      {% if user.is_authenticated %}
      <a class="nav-item nav-link" href="#">Tab 3</a>
      {% block searchform %}{% endblock searchform %}
      <a class="nav-item nav-link" href="#">Tab 4</a>
      <a class="nav-item nav-link" href="#">Tab 5</a>
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Tab 6</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Inbox{% if unread_count %} <strong>({{ unread_count }})</strong>{% endif %}</a>
        <a class="dropdown-item" href="#">Write</a>
        <a class="dropdown-item" href="#">Sent</a>
        <a class="dropdown-item" href="#">Archives</a>
        <a class="dropdown-item" href="#">Trash</a>
      </div>
      <a class="nav-item nav-link" href="#">Tab 7</a>
      <a class="nav-item nav-link btn btn-danger btn-sm text-light" href="{% url 'logout' %}">Logout</a>
      {% else %}
      <a class="nav-item nav-link btn btn-success btn-sm text-light" href="#">Login</a>
      <a class="nav-item nav-link btn btn-info btn-sm text-light" href="{% url 'register' %} ">Register</a>
      {% endif %}
    </div>
  </div>
</nav>

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