导航栏链接扩展 Bootstrap

Question

我在 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 class 不起作用）

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

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

Answer 1

如果你想让导航栏链接“扩展”到整个列，请尝试将 class 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>

结果：

导航栏链接扩展 Bootstrap

Navbar Links Extensions Bootstrap

css

razor

asp.net-core

bootstrap-4