Bootstrap 4 navbar не реагирует и остается открытым при стилизации

Question

У меня проблема с моей панелью навигации ... После того, как я стилизовал ее с помощью CSS, она не очень отзывчива и остается открытой на небольших экранах ... Вот мой код.

HTML:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" id="big-bar">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
            <div class="collapse navbar-collapse" id="navbar-el">
              <div class="navbar-nav">
                <a class="nav-item nav-link active flip" href="home.html">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link flip" href="mansion.html">Mansion</a>
                <a class="nav-item nav-link flip" href="#third-div">Sacrificial Grounds</a>
                <a class="nav-item nav-link flip" href="#fourth-div">Children of the Forest</a>
                <a class="nav-item nav-link flip" href="#fifth-div">About</a>
              </div>
            </div>
          </nav>

CSS:

body{
  background-color: black;
}

.navbar {
  background: rgba(0, 0, 0, 0) !important;
  margin-top: 50px;
}

#navbar-el {
  display: flex;
  align-items: center;
  justify-content: center;
}

#navbar-el a {
  margin: 0 50px 0 50px;
  font-size: 20px;
  color: white;

}

#navbar-el a:link {
}

#navbar-el a:visited {
}

#navbar-el a:hover {
    color: #ED8105;
}

#navbar-el a:active {
  color: #ED8105 !important;
}

#navbar-el a:focus{
  outline: none;
}

Codepen: https://codepen.io/Sarithan/pen/jvKaGa

Answer 1

use navbar-expand-lg

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="big-bar">

С помощью класса .navbar создается стандартная панель навигации, за которой следует отзывчивый свертывающийся класс: .navbar-expand-xl | lg | md | sm (укладывает панель навигации вертикально на очень большие, большие, средние или маленькие экраны).

https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp

Answer 2

Вы должны удалить поле из ваших тегов привязки (установите его на margin: 0 auto; и используйте justify-content: space-between; на вашем navbar-nav. Я также добавил flex-grow: 1; к navbar-nav

Iдобавил этот CSS:

.navbar-nav{
  justify-content: space-between;
  flex-grow: 1;
}

Пожалуйста, проверьте код.

https://codepen.io/anon/pen/rZKEvq

Answer 3

Он остается открытым, потому что у вас есть display:flex в дополнительном CSS ...

#navbar-el {
  display:flex
  align-items: center;
  justify-content: center;
}

Удалите `display: flex '.Также убедитесь, что у вас есть правильная цель для переключателя.

https://www.codeply.com/go/5NWAu5Zz1X