导航折叠上的 Bootstrap 4 居中徽标和标语

Question

我正在开发一个 Bootstrap 4 项目，其中我有一个带有居中徽标和标语的导航栏，然后是左右的一些链接。它几乎可以按照我的意愿工作，只是理想情况下我希望徽标在导航链接崩溃后保持居中。

这是我目前的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
    <div class="container-fluid ">

        <div class="d-flex flex-column text-center order-lg-2">

            <a class="navbar-brand" href="#">
                <img src="http://via.placeholder.com/350x150" alt="">
            </a>    

            <h2 class="tagline navbar-text">eco freindly clothing</h2>

        </div>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
            <ul class="nav navbar-nav ml-auto">
                <a class="nav-link" href="#">our ethics</a>
                <a class="nav-link" href="#">contact</a>
                <a class="nav-link" href="#">shop</a>
            </ul>
        </div>

        <div class="navbar-collapse collapse dual-nav w-50 order-lg-1">

            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="">instagram</a></li>
                <li class="nav-item"><a class="nav-link" href="">facebook</a></li>
                <li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
            </ul>

        </div>

    </div>
</nav>

目前，在链接折叠后，导航栏切换位于右侧，徽标和标语位于左侧。如何在中心保留标志和标语？

这是codeply

感谢您的帮助！

Answer 1

品牌、徽标、导航栏切换器和 2 个可折叠菜单的父级 flexbox 是 .container-fluid，而不是 <nav>。所以你需要在小屏幕上使用flex-direction: column;，在大屏幕上使用flex-direction: row; 和justify-content: space-between;。

您也可以为此使用引导程序内置类。

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
        ...
    </div>
</nav>

fiddle: http://jsfiddle.net/aq9Laaew/144985/（不想注册 codeply）

Answer 2

您可以通过为包含您的徽标和标题文本的 div 创建一个“居中”类来真正做到这一点。

.centered {
margin:auto;
display:block;
}

这是你的想法吗？请参阅下面的代码笔。

https://www.codeply.com/go/nss8DJRYN3