Кнопка переключения Navbar не работает в Bootstrap v4.1.3 - PullRequest
Новая
       1

Кнопка переключения Navbar не работает в Bootstrap v4.1.3

0 голосов
/ 21 сентября 2018

Я использую BootstrapCDN v4.1.3 и хочу, чтобы моя панель навигации всегда была прикреплена к верхней части браузера пользователя.Когда я устанавливаю nav div на position: fixed;, ни одна из ссылок не может быть нажата, когда браузер находится в режиме рабочего стола, а кнопка переключения навигационной панели не выпадает, когда браузер находится в мобильном режиме.Как только я удаляю атрибут CSS position: fixed;, все работает в навигационной панели, за исключением того, что он больше не располагается над стоковым видео, и он толкает видео вниз, когда меню мобильного браузера переключается в мобильном браузере.Это не мой желаемый результат, и я был бы признателен, если бы кто-нибудь помог мне понять, как заставить навигационную панель работать должным образом, сохраняя при этом фиксированное положение в верхней части браузера пользователя. 

nav.navbar {
  background-color: rgba(144, 188, 244, .8) !important;
  position: fixed;/* <---- Causing the navbar issue */
  width: 100%;
}

div.stockVideo {
  padding: 0;
}

#stockVideo {
  width: 100%;
  height: auto;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/normalize.css">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/custom.css">
  <title>Website</title>
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="media/placeholderLogo.png" width="44" height="44" alt="Logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <!-- Stock video -->
  <div class="container-fluid stockVideo">
    <video autoplay muted loop id="stockVideo">
            <source src="media/stockVideo.mp4" type="video/mp4">
        </video>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

Ответы [ 3 ]

0 голосов
/ 21 сентября 2018

Вы также можете попробовать загрузочный класс с фиксированным верхом, чтобы исправить панель навигации, например 

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
0 голосов
/ 21 сентября 2018

Добавьте отступ в верхнюю часть видео, чтобы учесть высоту Navbar. 

#stockVideo {
  width: 100%;
  height: auto;
  padding-top: 60px;
}

https://www.codeply.com/go/YWnrU7WAXM

В идеале тело должно иметь вместо этого отступ, как рекомендовано вthe Bootstrap docs ...

"Фиксированные навигационные панели используют position: fixed, что означает, что они вытягиваются из обычного потока DOM и могут требовать пользовательского CSS (например, padding-top на) дляпредотвратить наложение с другими элементами. "

body {
  padding-top: 60px;
}

Это было задано и получено ответ до .

РЕДАКТИРОВАТЬ

Если вы хотите исправить Navbar, используйте класс Bootstrap fixed-top.Использование только position:fixed не сработает, потому что вам также нужно установить z-index.Как видите, fixed-top работает здесь: https://www.codeply.com/go/YWnrU7WAXM

<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light"></nav>
0 голосов
/ 21 сентября 2018

Установка свойства navbar z-index: на 1 исправляет это: 

nav.navbar {
  background-color: rgba(144, 188, 244, .8) !important;
  position: fixed;
  width: 100%;

  z-index: 1;
}

Я бы также установил padding-top для высоты вашей панели навигации на body, например, так: 

body {
    padding-top: 59px; /* the height of your navbar */
}
nav.navbar {
    top: 0; /* bump the header back to the top */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...