Bootstrap navbar toggler не отображает ссылки при переключении? - PullRequest
Новая
       60

Bootstrap navbar toggler не отображает ссылки при переключении?

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

Вот код для справки и ссылка на кодовое поле . 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <title>Parallax Website</title>
</head>

<body>

  <!--Navbar-->
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md fixed-top navbar-dark">
      <a class="navbar-brand" href="#"><i class="fas fa-user-circle"></i>Business Website Name</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navi">
				<span class="navbar-toggler-icon"></span>
			</button>
      <div class="collapse navbar-collapse" id="navi">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
  </div>

Кажется, все работает хорошо, но по какой-то причине, когда размер экрана уменьшается, «гамбургер» не отображает элементы списка при нажатии.

Кроме того, внизу есть действительно раздражающее маленькое белое поле, от которого я, кажется, не могу избавиться независимо от того, сколько полей: 0, которые я размещаю.Тьфу.

1 Ответ

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

Используйте правильную версию Bootstrap 4 JavaScript (не 3.x).Codepen использует Bootstrap JS 3.x, поэтому переключатель Navbar не будет работать.

Чтобы удалить поле в нижнем колонтитуле, удалите нижнее поле (mb-0) из абзаца (<p>)... 

<footer>
    <div class="container-fluid footer">
        <p class="feetText mb-0">
            Copyright 2018 © Payton Jewell
        </p>
    </div>
</footer>

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

...