Bootstrap 4 navbar предотвращает коллапс

Question

Так что я не могу предотвратить самопроизвольное разрушение навигационной панели.Но такое свертывание происходит только где-то в середине изменения размера окна (около 1280 пикселей), но хорошо, когда окно широкое или узкое.

https://www.bootply.com/AcsaaqReAL

.navbar-custom {
    background-color: #333333;
    border-radius: 5px;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #999999;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}
a.nav-link:hover {
	color:#ffffff !important;
	 text-decoration:none;
} 
.active{
  background-color:#000000;  
}
.navbar {
   	margin-top: 10px;
   	margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

        <div class="row">

            <div class="col-md-4"></div>
            <div class="col-md-4">
                <!-- bootstrap nav -->
                <nav class="navbar navbar-expand navbar-light navbar-custom">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav mx-auto">
                            
                            <li class="nav-item active"><a class="nav-item nav-link">Home 1</a></li>
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 

                        </ul>
                    </div>
                </nav>
                <!-- /bootstrap nav -->
            </div>
            <div class="col-md-4"></div></div>


            <div id="push"></div>

Answer 1

Функциональный код:

---

Пожалуйста, прочитайте раздел Пояснения ниже, в котором я все объяснил.

.navbar-custom {
    background-color: #333333;
    border-radius: 5px;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #999999;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

a.nav-link:hover {
	color:#ffffff !important;
	 text-decoration: none;
}

.active{
  background-color:#000000;  
}

.navbar {
   	margin-top: 10px;
   	margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
 }

.center{
  margin: 0 auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="row">

           
            <div class="center">
                <!-- bootstrap nav -->
                <nav class="navbar navbar-expand navbar-light navbar-custom">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav mx-auto">
                            
                            <li class="nav-item active"><a class="nav-item nav-link">Home 1</a></li>
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          	<li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 

                        </ul>
                    </div>
                </nav>
                <!-- /bootstrap nav -->
            </div>
            </div>


            <div id="push"></div>
        

Здесь также приведен фрагмент с использованием CodePen, если вы хотите посмотреть, как он работает.

Пояснения:

---

Хорошо, спасибо, что это работает, но что вы сделали?
Я только что удалил все классы col-md-4 в вашем html, эти классы использовали систему Bootstrap Grid что является плохой практикой для центрирования вашей навигационной панели.

Как я должен это отцентрировать?
Что ж, лучше добавить класс для вызоваэкземпляр center в вашем HTML, как вы можете видеть <div class="center">, а затем добавьте соответствующий CSS для его центрирования по горизонтали

.center{
  margin: 0 auto;
}