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的代码片段 。

说明：

---

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

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

.center{
  margin: 0 auto;
}