导航栏链接扩展引导答案

【问题标题】：Navbar Links Extensions Bootstrap导航栏链接扩展引导
【发布时间】：2021-11-19 12:04:24
【问题描述】：

我在 Bootstrap 行中嵌套了一个“导航栏”。我遇到的问题是如何使链接“延伸”到整个专栏。

代码如下所示：

            <div class="col-6 p-3">
                <nav class="navbar navbar-expand-lg" style="justify-content: space-between;">
                    <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">
                        <ul class="navbar-nav 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>

（w-100 类不起作用）

不幸的是，在 Bootstrap 页面 [https://getbootstrap.com/docs/4.2/components/navbar/] 上，我没有看到这样的示例。在“navs”上有一个“nav-fill”类的例子[https://getbootstrap.com/docs/4.2/components/navs/#fill-and-justify]。它也不起作用。

是否可以拉伸导航链接，使它们以相等的间隔占用所有空间？

【问题讨论】：

标签： css asp.net-core razor bootstrap-4

【解决方案1】：

如果您想让导航栏链接“延伸”到整个列，请尝试将col 类添加到<li></li>。

<div class="col-6 p-3">
        <nav class="navbar navbar-expand-lg" style="justify-content: space-between;">
            <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">
                <ul class="navbar-nav w-100">
                    <li class="nav-item col">
                        <a class="nav-link text-black" href="#">Link1</a>
                    </li>
                    <li class="nav-item col">
                        <a class="nav-link text-black" href="#">Link2</a>
                    </li>
                    <li class="nav-item col">
                        <a class="nav-link text-black" href="#">Link3</a>
                    </li>
                    <li class="nav-item col">
                        <a class="nav-link text-black" href="#">Link4</a>
                    </li>
                    <li class="nav-item col">
                        <a class="nav-link text-black" href="#">Link5</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>

结果：

【讨论】：