css - 我怎样才能在不同的行上有 Brand 和 Navbar？

Question

非常简单，但我对 Bootstrap 相当业余。

我了解如何制作带有品牌和导航项图像的导航栏。在不破解它的情况下，是否有适当的方法将品牌定位在扩展导航上方？

基本上就是找这个；

EXPANDED-----------------------------------------|                 Logo                  |-----------------------------------------|         Home   About   Contact        |-----------------------------------------COLLAPSED-----------------| Logo        ≡ |-----------------

<nav class="mainNav navbar navbar-expand-md justify-content-center">
    <a class="navbar-brand" href="#">
        <img src="img/logo.png" alt="Logo" height="80px" width="auto">
    </a>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</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>
    </ul>
</nav>

Answer 1

使用 flex-column 使导航栏元素堆叠成 2 行(行)。

• 将 Logo 和切换器组合在 1 个 flexbox div 中 (d-flex w-100)
• 使用 mx-md-auto(自动边距)使 Logo 在较大的宽度上居中
• 使用 text-center 使 navbar-nav 中的元素居中

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

<nav class="mainNav navbar navbar-expand-md navbar-light flex-column">
    <div class="w-100 d-flex">
        <a class="navbar-brand mx-md-auto" href="#">
            <img src="img/logo.png" alt="Logo" height="80px" width="auto">
        </a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</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>
        </ul>
    </div>
</nav>

阅读更多关于 Navbar 的信息和 Utility Bootstrap 4 文档中的类。

---

相关问题
How to centre navbar logo in Boostrap 4 with nav-links below
Bootstrap 4: Navbar with logo and 2 rows
Bootstrap 4 navbar with 2 rows and inline form