如何在单独的行上放置Brand和Navbar? [英] How can I have Brand and Navbar on separate lines?

问题描述

很简单，但是我对Bootstrap还是很业余的.

Pretty simple, but I'm fairly amateur with Bootstrap.

我了解如何制作带有图像作为品牌和导航项目的导航栏.如果不进行修改，是否有适当的方法将品牌定位在扩展的导航上方?

I understand how to make the navigation bar with an image as the brand and the nav-items. Without hacking it, is there a proper way to have the brand positioned above the expanded navigation?

基本上是在寻找这个东西

Basically looking for this;

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>

推荐答案

使用flex-column将导航栏项目堆叠为2行(行).

Use flex-column to make the navbar items stack in 2 rows (lines).

• 对徽标进行分组& 1个flexbox div(d-flex w-100)中的切换器
• 使用mx-md-auto(自动边距)将徽标以较大的宽度居中
• 使用text-center将navbar-nav
中的项目居中

• group the logo & toggler together in 1 flexbox div (d-flex w-100)
• use mx-md-auto (auto-margins) to center the logo on larger widths
• use text-center to center items in the 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>

详细了解导航栏和 相关问题
如何在Boostrap 4中将navbar徽标居中下方具有导航链接
引导程序4:带有徽标和2行的Navbar
Bootstrap 4导航栏(具有2行和内联格式)

Related questions
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

这篇关于如何在单独的行上放置Brand和Navbar?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！