Bootstrap嵌套在row内的navbar链接如何撑满所在列宽度

解决方法 #

你可以通过3处代码调整实现需求：

• 删除<nav>标签上手动设置的justify-content: space-between;样式，避免干扰宽度分配
• 给.collapse.navbar-collapse元素添加w-100类，确保折叠容器先占满外层导航栏的全部可用宽度
• 给.navbar-nav元素添加nav-justified类，该类会自动让所有导航项等分父容器的全部宽度

修改后的完整代码如下：

<div class="col-6 p-3">
    <nav class="navbar navbar-expand-lg">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse w-100">
            <ul class="navbar-nav nav-justified w-100">
                <li class="nav-item">
                    <a class="nav-link text-black" href="#">Link1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-black" href="#">Link2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-black" href="#">Link3</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-black" href="#">Link4</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-black" href="#">Link5</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

如果需要导航项不等分、仅按内容占比填充剩余空间，可以把nav-justified替换为nav-fill即可。

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