Bootstrap 4导航栏可防止崩溃

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的工作原理，那么这里也是snippet的使用者。

说明：

---

非常感谢，但是您做了什么？
我刚刚删除了html中的所有col-md-4类，这些类使用的是Bootstrap Grid system，这是使导航栏居中的一种不好的做法。

我应该如何居中？
好吧，一种更好的做法是在HTML中添加一个名为实例center的类，如您所见<div class="center"> 然后添加与之相对应的CSS，以使其水平居中

.center{
  margin: 0 auto;
}