Bootstrap 4 - 全宽导航，最外层链接接触容器边缘

Question

我正在尝试使用 Bootstrap 4 添加一个全宽导航栏，并让最左侧和最右侧的链接接触容器的边缘（有关我想要实现的示例，请参阅 Etsy.com 上的导航):

我尝试在每个导航链接上使用text-left，但最右边的链接没有正确对齐。

这是我正在使用的 CodePly： https://www.codeply.com/go/I9X4D7HpZ2

如何让导航为全宽，最左边和最右边的链接接触边缘？ 谢谢

当前代码：

 <nav class="navbar navbar-expand-sm navbar-light pl-2 pt-0 pb-2 border-bottom">
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav nav-fill w-100">
                            <li class="nav-item">
                                <a class="nav-link text-dark mr-4 text-left" href="#">Link 1</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark mr-4 text-left" href="#">Link 2</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark mr-4 text-left" href="#">Link 3</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark mr-4 text-left" href="#">Link 4</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark mr-4 text-left" href="#">Link 5</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-dark text-left" href="#">Link 6</a>
                            </li>
                        </ul>
                </div>
            </nav>

Answer 1

---

您必须覆盖默认引导样式，并且还有一些类会导致一些问题（例如 text-left）。试试这个：

    <div class="container">
        <header>
            <div>

                <nav class="navbar navbar-expand-sm navbar-light bg-white flex-row">
                    <a class="navbar-brand mr-auto" href="/"><span style="color:#0099ff">MyBrand</span></a>
                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control form-control-sm mr-sm-2" type="text" placeholder="Search">
                        <button class="btn btn-sm btn-outline-secondary my-2 my-sm-0" type="submit">Search</button>
                    </form>
                    <button class="navbar-toggler ml-lg-0" 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>
                </nav>
                <nav class="navbar navbar-expand-sm navbar-light pl-2 pt-0 pb-2 border-bottom">
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav nav-fill w-100 justify-content-between">
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link d-inline-block text-dark text-center" href="#">Link 1</a>
                                </li>
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link d-inline-block text-dark text-center" href="#">Link 2</a>
                                </li>
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link d-inline-block text-dark text-center" href="#">Link 3</a>
                                </li>
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link d-inline-block text-dark text-center" href="#">Link 4</a>
                                </li>
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link d-inline-block text-dark text-center" href="#">Link 5</a>
                                </li>
                                <li class="nav-item flex-grow-0">
                                    <a class="nav-link text-dark text-center" href="#">Link 6</a>
                                </li>
                            </ul>
                    </div>
                </nav>
            </div>
    </header>
    </div>