Как расположить div в конце панели навигации? С помощью bootstrap 4

ProgramBox

Как расположить div в конце панели навигации? С помощью bootstrap 4

Post author:admin
Запись опубликована:21 февраля, 2023
Post category:Вопросы по программированию

#html #bootstrap-4 #navbar #nav

#HTML #bootstrap-4 #панель навигации #навигация

Вопрос:

Мне нужно разместить 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>

Если вы заметили, выход из системы находится под двумя меню, но мне нужно, чтобы он занимал всю высоту навигационной панели и располагался в ее конце.

Что-то вроде этого:

введите описание изображения здесь

При просмотре на мобильном устройстве выход из системы очень запутанный, но мне нужно, чтобы он слился с остальной частью меню, как еще один пункт

Ответ №1:

Вы можете сделать это так

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

1. Проблема с этим заключается в том, что при просмотре на мобильном устройстве выход из системы не учитывается, но идея в том, что его нужно комбинировать с другими пунктами меню.

2. поэтому используйте технику display none и block

3. Если вам понравился мой ответ или вы получили какую-либо помощь от моего ответа, не забудьте проголосовать и проверить этот ответ как лучший для вас, нажав на стрелку вправо, спасибо!