Bootstrap 4.1-如何在单独的行中获取菜单项

Question

我希望将菜单中的所有菜单项（请参阅id="navbarSupportedContent"）放在单独的行中，徽标和菜单项居中。 我已经尝试使用container和row，但是并没有成功。它们始终保持在徽标旁边（正确位置）。 而且，汉堡菜单按钮仍应位于移动（较小）视图的右端。 任何人都有一个想法如何实现这一目标？ 这是我的导航栏中的代码：

<nav className="navbar navbar-expand-xl navbar-light bg-light">
    <div className="d-none d-xl-inline text-center">
        <a className="navbar-brand" href="/">
            <img src={logo} className="img-fluid logo" alt="Logo" />
            <span className="logoTitle"> KiTa Förderverein </span>
            <img src={logo} className="img-fluid logo" alt="Logo" />
        </a>
    </div>
    <div className="d-xs-inline d-sm-inline d-xl-none">
        <div className="row">
            <div className="col-12">
                <a className="navbar-brand" href="/">
                    <img src={logo} className="img-fluid logo" alt="Logo" />
                </a>
            </div>
        </div>
        <div className="row">
            <div className="col-12 logoTitle">
                KiTa Förderverein
            </div>
        </div>
    </div>
    <button className="navbar-toggler" type="button" onClick={this.menuClickHandler.bind(this)}>
        <span className="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item"><a class="nav-link" href="#/">FÖRDERVEREIN</a></li>
            <li class="nav-item"><a class="nav-link" href="#/vorstand">VORSTAND</a></li>
            <li class="nav-item"><a class="nav-link" href="#/beitreten">BEITRITT</a></li>
            <li class="nav-item"><a class="nav-link" href="#/satzung">SATZUNG</a></li>
        </ul>
    </div>
</nav>

请在此处找到一个代码笔链接：https://codepen.io/anon/pen/djboWK