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

您实际上可以简单地通过为div创建一个包含徽标和标题文本的“居中”类来实现此目的。

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

这是您的初衷吗？请参见下面的代码笔。

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

Answer 2

品牌，徽标，导航栏切换器和2个可折叠菜单的flexbox父级是.container-fluid，而不是<nav>。因此，您需要在小屏幕上进行flex-direction: column;，在大屏幕上进行flex-direction: row;的{{1}}。

您也可以为此使用bootstrap内置类。

justify-content: space-between;

小提琴： http://jsfiddle.net/aq9Laaew/144985/（不想通过密码注册）

导航折叠时以Bootstrap 4为中心的徽标和标语

2 个答案: