Раскрывающийся список навигации не работает, а панель навигации застревает в верхней части экрана.(Bootstrap 4) - PullRequest
Новая
       2

Раскрывающийся список навигации не работает, а панель навигации застревает в верхней части экрана.(Bootstrap 4)

0 голосов
/ 19 июня 2019

Я хочу, чтобы моя панель навигации была прикреплена к верхней части экрана, но тогда кнопка выпадающего меню работает неправильно.Но если я удаляю fixed-top, выпадающий список работает, но он больше не застревает в верхней части экрана.

Также я пытаюсь вставить пустую строку между ДОМОМ и Учетной записью в раскрывающемся списке и не могу понять,как это сделать, не прерывая раскрывающийся список. 

<nav class="navbar navbar-expand-sm fixed-top">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
  <a class="navbar-brand" href="/testing/"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
   <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav navbar-right links">
     <li class="nav-item"><a href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a></li>
     <li class="nav-item"><a href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span> admin</a></li>
     <li><a href="/testing/users/messages.php"><i class="fa fa-envelope"></i> <span id="msgCount" class="badge" style="margin-top: -5px"></span></a></li>
     <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-cogs"></span>  <span class="caret"></span></a>
        <div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
            <a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
            <a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span> Account</a>
            <a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin Dashboard</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span> User Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span class="fa fa-fw fa-lock"></span> Permissions Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span> Page Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span class="fa fa-fw fa-envelope"></span> Messages Manager</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span> System Logs</a>
            <a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span> Logout</a>
        </div>
     </li>      
  </ul>
</div>
  <ul class="navbar-nav navbar-right">
     <li class="nav-item dropdown hidden">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuHidden" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu dropdown-info hidden-links" aria-labelledby="navbarDropdownMenuHidden">
        </div>
     </li>
  </ul>

1 Ответ

1 голос
/ 20 июня 2019

Чтобы сделать разделитель в выпадающем меню, вы можете использовать <div class="dropdown-divider"></div>, а чтобы выровнять ваш ul по правому краю, вы можете использовать класс начальной загрузки ml-auto Вместо fixed-top вы можете использовать sticky-top, так как ваша панель навигации будетпрокрутить страницу прокрутки 

.dropdown-divider {
  border-top: 1px solid red!important;
}

li.nav-item {
  padding: 0px 15px
}

@media only screen and (min-width: 767px) {
  ul.navbar-nav {
    padding: 0px 60px
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
    <a class="navbar-brand" href="#"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav  ml-auto">
        <li class="nav-item"><a href="/testing/" class="nav-link"><span class="fa fa-fw fa-home"></span> Home</a></li>
        <li class="nav-item"><a href="/testing/users/account.php" class="nav-link"><span
              class="fa fa-fw fa-user"></span> admin</a></li>
        <li class="nav-item">
          <a href="/testing/users/messages.php" class="nav-link">
            <span class="fa fa-envelope"></span><i class="badge"></i> Message</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-cogs"></span> <span class="caret"></span>Settings</a>
          <div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
            <a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span>
              Account</a>
            <a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin
              Dashboard</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span>
              User Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span
                class="fa fa-fw fa-lock"></span> Permissions Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span>
              Page Management</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span
                class="fa fa-fw fa-envelope"></span> Messages Manager</a>
            <a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span>
              System Logs</a>
            <a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span>
              Logout</a>
          </div>
        </li>
        <li class="nav-item dropdown menu">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <span
                class="fa fa-fw fa-lock"></span> menu
          </a>
          <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
            <a class="dropdown-item mx-auto" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Another action</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...