Bootstrap 4导航栏可防止崩溃

Question

所以我似乎无法防止导航栏自行崩溃。但是这种崩溃行为只发生在窗口调整大小的中间（大约1280px），但是当窗口宽或窄时它很好。

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的snippet。

说明：

---

好，谢谢它有效，但你做了什么？ 我刚刚删除了你的html中的所有col-md-4类，这些类使用的是Bootstrap Grid system，这是一个不好的做法，以使你的导航栏居中。

我怎么能把它集中在一起呢？ 好吧，更好的做法是在你的HTML中添加一个名为center的类，你可以看到<div class="center">然后添加对应的CSS以便水平居中

.center{
  margin: 0 auto;
}