Почему моя навигационная панель неправильно сворачивается и отображает кнопку выпадающего меню?

Question

Я только начал изучать основы, и я уверен, что с этим кодом что-то не так, это неправильный подход или, по крайней мере, я что-то делаю правильно? : P https://jsfiddle.net/0cjwyuqe/

<nav class="navbar navbar-dark bg-dark navbar-expand text-nowrap">
<div class="container">
    <div class="row w-100 align-items-center">

        <div class="col-md-3">
            <a href="" class="navbar-brand justify-content-start">
                <h1 class="display-3" id="cont">TEST<span id="se">.SE</span></h1>
            </a>
        </div>
        <button type="button" class="navbar-toggler collapse" data-toggle="collapse" data-target="#navbar1">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="col-md-5">
            <div class="navbar-nav">
                <div class="collapse navbar-collapse" id="navbar1">
                    <a href="#" class="nav-item nav-link">TEST1</a>
                    <a href="#" class="nav-item nav-link">TEST2</a>
                    <a href="#" class="nav-item nav-link">TEST3</a>
                    <a href="#" class="nav-item nav-link">TEST4</a>
                    <a href="#" class="nav-item nav-link">TEST5</a>
                </div>
            </div>
        </div>

        <div class="col-md-1"></div>


        <div class="col-md-3">
            <div class="navbar-nav justify-content-end">
                <a href="#" class="nav-item nav-link mx-1 text-nowrap" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
                <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
            </div>
        </div>
    </div>
</div>

Answer 1

Вы были очень близки, потребовалось только 2 изменения

• на вашем элементе навигации, я изменил класс navbar-expand на navbar-expand-sm, который говорит, что navbar является точкой останова для переключения по горизонтали (в нормальном режиме) и вертикальный стиль (меню бургера) для панели навигации: sm, это может быть navbar-expand-md или navbar-expand-lg и c.
• на вашей кнопке с классом navbar-toggler у вас был класс 'схлопывание' поместил, что означало, что кнопка имела display:none и не была в DOM

рабочий фрагмент ниже с этими 2 изменениями:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/38a8bb4287.js" crossorigin="anonymous"></script>



<nav class="navbar navbar-dark bg-dark navbar-expand-sm text-nowrap">
  <div class="container">
    <div class="row w-100 align-items-center">

      <!-- TITLE -->

      <div class="col-md-3">
        <a href="" class="navbar-brand justify-content-start">
          <h1 class="display-3" id="cont">TEST<span id="se">.SE</span></h1>
        </a>
      </div>

      <!-- NAV TOGGLER -->
      <button type="button" class="navbar-toggler " data-toggle="collapse" data-target="#navbar1">
				<span class="navbar-toggler-icon"></span>
			</button>
      <!-- NAVIGATION -->

      <div class="col-md-5">
        <div class="navbar-nav">
          <div class="collapse navbar-collapse" id="navbar1">
            <a href="#" class="nav-item nav-link">TEST1</a>
            <a href="#" class="nav-item nav-link">TEST2</a>
            <a href="#" class="nav-item nav-link">TEST3</a>
            <a href="#" class="nav-item nav-link">TEST4</a>
            <a href="#" class="nav-item nav-link">TEST5</a>
          </div>
        </div>
      </div>

      <!-- SPACER -->

      <div class="col-md-1"></div>

      <!-- LOGIN -->

      <div class="col-md-3">
        <div class="navbar-nav justify-content-end">
          <a href="#" class="nav-item nav-link mx-1 text-nowrap" id="login"><i class="fas fa-user-check mr-1"></i>Login</a>
          <a href="#" class="nav-item nav-link mx-1"><i class="fas fa-user-plus mr-1"></i>Register</a>
        </div>
      </div>
    </div>
  </div>
</nav>

<!-- CONTENT -->

<div class="container"></div>



<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>