Bootstrap 4导航栏可防止崩溃

Question

So i cant seem to prevent the navbar from collapsing on it self. But this collapsing behaviour only happens, somewhere in the middle of the resizing of the window (around 1280px) but it's fine when the window is wide or narrow.

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

Functional code:

---

Please read the Explanations section below on which I explained everything.

 .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> 

Here is also a snippet using CodePen if you wanna see how it works.

Explanations:

---

Well thanks it works but what did you do?
I just removed all the col-md-4 class in your html, those class were using the Bootstrap Grid system which is a bad practice in order to center your navbar.

How am I supposed to center it so?
Well, a better practice is to add a class called for instance center in your HTML as you can see <div class="center"> And then add the CSS corresponding to it in order to center it horizontally

.center{
  margin: 0 auto;
}