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;
}