Twitter bootstrap 带中心导航品牌的引导导航栏_Twitter Bootstrap_Bootstrap 4_Navbar

Twitter bootstrap 带中心导航品牌的引导导航栏

twitter-bootstrap bootstrap-4

Twitter bootstrap 带中心导航品牌的引导导航栏,twitter-bootstrap,bootstrap-4,navbar,Twitter Bootstrap,Bootstrap 4,Navbar,我正在尝试制作一个以nav品牌为中心的反应灵敏的导航条。问题是，当它被折叠时，它不会显示菜单的右侧，有时会显示，但方式很奇怪。我想在折叠的导航栏上显示导航品牌下方的导航项目我的导航栏： HTML: 导航栏切换按钮使用数据目标标识移动屏幕折叠菜单中要包含的项目如果您希望在小屏幕上的菜单中包含两个（或更多）链接列表，请从使用id（id必须唯一–您可以再次使用相同的id）切换到使用类，并将相同的类应用于每个列表身体{ 字体系列：无衬线； } 身体{ 边缘顶部：75px； } navbar

我正在尝试制作一个以nav品牌为中心的反应灵敏的导航条。问题是，当它被折叠时，它不会显示菜单的右侧


身体{
字体系列：无衬线；
}
身体{
边缘顶部：75px；
}
navbar先生{
填充：0；
}
.导航栏导航栏品牌{
颜色：#efefef；
}
.导航栏导航项目{
字体大小：1.3rem；
左侧填充：0.7rem；
右侧填充：0.7rem；
}
.导航栏导航。导航项目a，
.导航栏导航.导航项目按钮{
颜色：#efefef；
}
.导航项目：悬停{
背景：#f7f7f7；
}
.导航项目：悬停{
背景：ACE3；
}

<!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>

    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;
}