具有居中导航品牌的引导导航栏答案

【问题标题】：bootstrap navbar with centered nav-brand具有居中导航品牌的引导导航栏
【发布时间】：2021-07-25 04:23:20
【问题描述】：

我正在尝试制作一个以导航品牌为中心的响应式导航栏。问题是当它被折叠时，它不会显示菜单的正确，有时它会显示，但方式很奇怪。我想在折叠的导航栏上显示导航品牌下方的导航项目。

我的导航栏： https://codepen.io/0xSimo/pen/MWJNaYP

HTML：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>ChriDarek</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" >

    <!-- Fonts -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

    <style>
        body {
            font-family: sans-serif;
        }
    </style>

    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>


<nav class="navbar navbar-expand-lg fixed-top bg-primary">
    <div class="container">
        <div class="collapse navbar-collapse order-lg-1 order-3" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item py-1">
                    <a href="" class="nav-link ">Home</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Buy</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Rent</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Sell</a>
                </li>

            </ul>
        </div>

        <a href="" class="navbar-brand text-white mx-2 order-1">
            <h2 class="d-inline align-middle"><strong>centerLogo</strong></h2>
        </a>

        <button class="order-2 navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="text-white fas fa-bars fa-2x"></i>
        </button>

        <div class="collapse navbar-collapse order-lg-3 order-4" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">

                <li class="nav-item py-1">
                    <a href="" class="nav-link">Register</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Login</a>
                </li>

            </ul>
        </div>
    </div>
</nav>



<script src="{{asset('js/main.js') }}"></script>


<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

CSS：

    body {
  margin-top: 75px;
}

.navbar {
  padding: 0;
}

.navbar-nav .navbar-brand {
  color: #efefef;
}

.navbar-nav .nav-item {
  font-size: 1.3rem;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.navbar-nav .nav-item a,
.navbar-nav .nav-item button {
  color: #efefef;
}

.nav-item:hover {
  background: #f7f7f7;
}

.nav-item:hover {
  background: #56ace3;
}

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

navbar-toggler 按钮使用数据目标来识别要包含在移动屏幕折叠菜单中的项目。

如果您希望在小屏幕上的菜单中包含两个（或更多）链接列表，请从使用 id（id 必须是唯一的 - 您可以再次使用相同的 id）切换到使用类并应用相同的对每个列表进行分类。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>
    body {
        font-family: sans-serif;
    }

    body {
        margin-top: 75px;
    }

    .navbar {
        padding: 0;
    }

    .navbar-nav .navbar-brand {
        color: #efefef;
    }

    .navbar-nav .nav-item {
        font-size: 1.3rem;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .navbar-nav .nav-item a,
    .navbar-nav .nav-item button {
        color: #efefef;
    }

    .nav-item:hover {
        background: #f7f7f7;
    }

    .nav-item:hover {
        background: #56ace3;
    }
</style>

<nav class="navbar navbar-expand-lg fixed-top bg-primary">
    <div class="container">
        <div class="collapse navbar-collapse order-lg-1 order-3 navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item py-1">
                    <a href="" class="nav-link ">Home</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Buy</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Rent</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Sell</a>
                </li>

            </ul>
        </div>

        <a href="" class="navbar-brand text-white mx-2 order-1">
            <h2 class="d-inline align-middle"><strong>centerLogo</strong></h2>
        </a>

        <button class="order-2 navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <i class="text-white fas fa-bars fa-2x"></i>
        </button>

        <div class="collapse navbar-collapse order-lg-3 order-4 navbarSupportedContent">
            <ul class="navbar-nav ml-auto">

                <li class="nav-item py-1">
                    <a href="" class="nav-link">Register</a>
                </li>
                <li class="nav-item py-1">
                    <a href="" class="nav-link">Login</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

与其使用 Codepen，不如使用 sn-p 工具最简单。

【讨论】：