如何将div放置在导航栏的末尾？带自举4

编程问答 2022-06-05

问题描述

我需要在导航栏的末尾放置一个div，在移动设备上查看时，它会与菜单的其余部分一起隐藏

我保留了html的一部分。

.navbar {
          padding:0rem;
          margin-bottom:2rem;
        }
        .nav-link
        {
            color: White !important;
            padding-top: 5px;
            padding-bottom: 5px;
            font-weight: 500;
            }
        .nav-item:hover
        {
            background-color: White;
            }
            
        .nav-item > .nav-link:hover
        {
            color: #0071BA !important;
            }
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
</head>
<body>
<header>
        <nav class="navbar navbar-expand-md sticky-top" style="background-color:#0071BA;">
   <a class="navbar-brand" style="width: 240px;color: White;">logo</a>
  <div class="navbar-toggler-right">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="color: White; border-color: White;">
                <i class="fas fa-bars"></i>
            </button>
  </div>
  <div class="collapse navbar-collapse flex-column " id="navbar">
    <ul id="nav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
        <li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
      </ul>
      <ul id="subnav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
        <li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item"><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
        <li class="nav-item" ><a class="nav-link" Width="104px" href="#"style="white-space: Nowrap;">Item<a> </li>
      </ul>
      <div id="divCierra" class="pull-right navbar-toggler-right" style="background-color: white;height: 80px;vertical-align: middle;border: 1px solid #0071BA;display: flex;align-items: center;float: left;"><div id="div2" style="
    background-color: white;
    width: 100%;"><a ID="btnCerrar" class="CerrarCss" >Cerrar sesión<a>
    </div>
    </div>
  </div>
</nav>
</header>
</body>
</html>

如果您注意到，注销位于两个菜单下，但是我需要它占据导航栏的整个高度并位于导航栏的末尾。

类似的东西：

enter image description here

在移动设备上进行查看时，注销非常麻烦，但我需要将其与菜单的其余部分合并，作为一项附加内容

解决方法

你可以那样做

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<style>
  .navbar {
    padding: 0rem;
    margin-bottom: 2rem;
  }
  
  .nav-link {
    color: White !important;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 500;
  }
  
  .nav-item:hover {
    background-color: White;
  }
  
  .nav-item>.nav-link:hover {
    color: #0071ba !important;
  }
</style>

<body>
  <header>
    <nav class="navbar navbar-expand-md sticky-top" style="background-color: #0071ba;">
      <a class="navbar-brand" style="width: 240px; color: White;">Logo</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" style="color: White; border-color: White;">
                <i class="fas fa-bars"></i>
            </button>
      <div class="collapse navbar-collapse flex-column" id="navbar">
        <ul id="nav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
        </ul>
        <ul id="subnav" class="navbar-nav w-100 px-3" style="margin: 0 !important;">
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
          <li class="nav-item"><a class="nav-link" Width="104px" href="#" style="white-space: nowrap;">Item</a></li>
        </ul>
      </div>
      <div id="divCierra" class="pull-right navbar-toggler-right" style="background-color: white; height: 80px; vertical-align: middle; border: 1px solid #0071ba; display: flex; align-items: center; float: left;">
        <div id="div2" style="background-color: white; width: 100%;"><a id="btnCerrar" class="CerrarCss">Cerrar sesión</a></div>
      </div>
    </nav>
  </header>
</body>

</html>

bootstrap-4htmlnavnavnavbarnavbar