Bootstrap 4 Navbar防止物品塌陷并居中

如何解决Bootstrap 4 Navbar防止物品塌陷并居中

我正在练习使用ReactJS和Bootstrap 4创建一个移动网站，并且需要创建一个如下所示的Navbar。

普通

普通菜单：

折叠

折叠菜单：

到目前为止，我已经能够通过将它们放置在折叠菜单之外的div中的另一个NavBar中来找出如何从折叠菜单中排除项目，但是输出仍然不符合我的期望看。此外，当折叠模式下的NavBar展开时，它会将我的内容向下推，这不是我所需要的。我在NavBar上方有一个徽标，因此无法使用fixed-top。这是我到目前为止的内容：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>



<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="logo Thing main logo">
<nav class="navbar navbar-dark navbar-expand-lg navbar-template">
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto bg-dark">
            <li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Send</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
            <li class="dropdown-divider"></li>
            <li class="nav-item"><a class="nav-link" href="#">logout</a></li>
        </ul>
    </div>
    <div class="d-flex flex-row order-2 order-lg-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
            <li class="nav-item ml-auto"><img class="nav-link px-2" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></li>
        </ul>

    </div> 
</nav>
<div class="container"></div>

反正有实现我所需的NavBar吗？更具体地说，是从折叠菜单中排除某些项目，还是在NavBar变为折叠状态时更改某些项目的位置，并阻止其将内容向下推？

解决方法

因此，您需要进行一些媒体查询，以隐藏某些元素并显示其他元素。

我要做的第一件事是弄清楚您的主要徽标是自己的容器来修复在顶部。
第二个是从您添加的div中取出collopase按钮。
3rd我在主菜单后添加到2 div以在屏幕显示元素小于992px。
第四次将“我的名字”添加到您的主菜单中，然后再次显示显示它。

您显然需要将所有class更改为className才能正常工作。

希望它已经接近问题了

.container-logo{
  width:100%;
  display:flex;
  justify-content: center;
}
#navbarNavDropdown{
  position: absolute;
  top: 116px;
}
ul.navbar-nav{
  padding: 0 15px;
}
@media (min-width: 992px){
  #navbarNavDropdown{
    position: relative;
    top: 0;
  }
  ul.navbar-nav{
    padding: 0;
  }
  .d-lg-list-item {
      display: list-item!important;
  }
}

.logo-main{
  width:100px;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-logo">
    <img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
  </div>

  <nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto bg-dark list-unstyled">
        <li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Account</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Send</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
        <li class="dropdown-divider"></li>
        <li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
        <li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
        <li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
      </ul>
    </div>
    <div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
    <div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
      
      <!--<div class="flex-row order-2 order-lg-3">
          
          <ul class="navbar-nav flex-row list-unstyled">
              <li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
              
          </ul>

      </div> -->
  </nav>
  <div class="container">
    Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nunc eget lacus vel justo porta ornare cursus finibus ligula. Quisque et neque cursus,finibus dui non,aliquam ex. Donec tincidunt interdum augue a scelerisque. Suspendisse congue semper odio. Vivamus in felis at lorem consectetur cursus. Fusce accumsan dignissim turpis,in ornare quam dictum ut. Aenean vel pretium risus. Ut ut tempus erat. Quisque eros risus,bibendum ac erat quis,semper hendrerit libero.

    Aliquam et placerat augue. Ut sed ex arcu. Duis dapibus faucibus est posuere imperdiet. Sed et faucibus purus. Donec ex ex,facilisis id velit quis,congue eleifend nunc. Etiam sed leo orci. In molestie pharetra lacus,maximus dictum nunc iaculis nec. Aenean nisi ipsum,finibus nec ligula id,ultricies luctus orci. Quisque quis metus non nulla tincidunt tempor fringilla ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis,ligula id faucibus lacinia,metus tellus sagittis turpis,eget aliquet elit felis non risus. Nunc lacus dui,posuere non nisl a,eleifend facilisis ipsum. Fusce in leo nibh. Duis condimentum blandit lobortis. Fusce maximus risus eget urna sodales luctus.

    Etiam rhoncus ornare dui,vel vehicula leo pellentesque sed. Curabitur in odio enim. Curabitur ut ullamcorper mi. Suspendisse condimentum sapien quis tortor auctor elementum. Donec ac euismod neque. Nunc eget sapien a purus viverra tincidunt. Mauris rhoncus arcu ut diam maximus malesuada. Mauris scelerisque mattis lectus sed venenatis. Ut viverra diam in eros lacinia,sit amet blandit nisl tempus. Aliquam condimentum magna et massa fringilla,nec facilisis odio fringilla. Etiam ultrices,mauris ut elementum sodales,sem justo ultricies orci,vitae fringilla dui magna ut sapien. Phasellus posuere lacus nec leo ornare rutrum.

    Suspendisse neque lectus,fringilla quis dui in,feugiat scelerisque turpis. Aliquam porta turpis nulla,sit amet volutpat ex suscipit ac. Sed nec neque vel nibh porttitor laoreet. Quisque convallis dolor sem,non fermentum justo tincidunt sit amet. Aliquam vitae est elit. Cras eros felis,dignissim eget suscipit vel,facilisis et lorem. Morbi vitae tempus lorem. Aenean et ullamcorper orci. Nullam in finibus urna. Sed interdum vel libero at mattis. Nulla suscipit,massa in pharetra dapibus,massa metus mattis dui,quis efficitur quam est vitae arcu. Sed congue tristique suscipit. Praesent eget nibh volutpat,laoreet mi a,facilisis dui. Donec quis tellus et magna accumsan bibendum. Integer ullamcorper nibh non elit malesuada varius. Proin id laoreet mi.

    Proin pharetra nibh non metus aliquam,tempus elementum felis ultricies. Mauris et enim nibh. Donec sit amet mi eu purus ultricies aliquam eget nec nibh. Cras velit nunc,viverra ut iaculis sit amet,molestie sed turpis. Etiam posuere quis enim ac ultrices. Quisque justo mi,vestibulum at enim at,suscipit pretium arcu. Aliquam vulputate ipsum mattis gravida laoreet. Nullam nulla ante,egestas viverra ligula nec,molestie luctus lorem. Phasellus convallis nulla et dignissim cursus. Orci varius natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Cras bibendum condimentum nunc,ut maximus lectus blandit et. Curabitur elementum tellus risus,non semper odio hendrerit id. Mauris faucibus luctus suscipit. Nullam sed ultrices enim. Aenean facilisis risus id arcu consequat,a fringilla sapien elementum.


  </div>
</body>