带有居中文本简介的 Bootstrap 4 导航栏

问：

我以为这很容易，但 7 小时后，没有。

我试图将我的定位在左边，一个文本简介居中（始终可见），而我的放在右边。navbar-brandnavbar-collapse

问题是始终可见的中心文本 - 我尝试的所有内容都强制文本使用换行符。

    <div class="navbar navbar-expand-lg justify-content-center">
        <div class="container">
            <a href="/" class="navbar-brand d-flex w-50 mr-auto">
                <h1>
                    <img src="/img/xxx.svg" width="36" height="36" alt="foobar">
                    Foobar
                </h1>
            </a>

            <need a container here to center this text>CENTERED BLURB OF TEXT</need>

            <button type="button" class="navbar-toggler bg-primary" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="valign-image-text">
                    MENU
                    <img src="/img/menu-light.svg" width="30" height="30" alt="" class="ml-2">
                </span>
            </button>

            <div class="navbar-collapse collapse w-100" id="navbar-collapse">
                <!-- <ul class="navbar-nav w-100 justify-content-center"> -->
                    <!-- <li>This centered blurb of text collapses, not what I want</li> -->
                <!-- </ul> -->

                <ul class="navbar-nav w-100 ml-auto justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    <li class="nav-item"><a class="btn btn-gray ml-0 ml-lg-4" href="#">Downloads</a></li>
                </ul>
            </div>
        </div>
    </div>

不要在 SO 上发布指向其他 Bootstrap 4 居中助手帖子的链接，因为它们没有涵盖这一点。