Bootstrap導航欄鏈接文本在谷歌瀏覽器中發生故障，但不在Firefox中

Question

我在導入設置中有一個導航欄，它在Firefox中正常工作，但我的谷歌瀏覽器。導航鏈接的文本，如「聯繫我們」的第二個單詞一樣，多個單詞都會下降。如何解決這個問題，它在Mozilla怪異，即使調整窗口大小的字不破

---

HTML

<nav class="navbar navbar-default"> 
      <div class="container-fluid"> 

      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
      </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 

      <li class="active nav-links"><a href="#">Home<span class="sr-only">(current)</span></a></li> 
      <li class="nav-links"> <a href="aboutus.html">About Us</a> </li> 
      <li class="nav-links"> <a href="whoweare.html">Who We Are</a> </li> 
      <li class="nav-links"> <a href="mission.html">Mission</a> </li> 
      <li class="nav-links"> <a href="activities.html">Activities</a> </li> 
      <li class="nav-links"> <a href="gallery.html">Gallery</a> </li> 
      <li class="nav-links"> <a href="donate.html">Donate</a> </li> 
      <li class="nav-links"> <a href="sitemap.html">Sitemap</a> </li> 
      <li class="nav-links"> <a href="contactus.html">Contact Us</a> </li> 

      </ul> 


     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
    </nav> 

CSS

nav { 
       width: 100%; 
       height: 40px; 
       background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
       background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
       background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
       border-radius: 6px !important; 
       -moz-border-radius: 6px !important; 
       color: white 
      } 

     .navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a { 
      color: white; /*Sets the text hover color on navbar*/ 
      padding-right: 22%; 
      font-size: 1.2em; 
     } 


     .navbar .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
      color: white; /*Sets the text hover color on navbar*/ 
      text-decoration: underline; 
     } 

     .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > 
     a:hover, .navbar-default .navbar-nav > .active > a:focus { 
      background: none; 
      color: white; 
      text-decoration: underline; 
     } 

Answer 1

您可以使用white-space: nowrap;防止文本換行，你可能需要使用以下命令：

1）你並不需要重置您的導航欄的高度。 2）您可以使用媒體查詢來更改填充，以便您的鏈接不會因爲視口縮小而換行到新行。

請參閱示例代碼段。

.navbar.navbar-default { 
 
    width: 100%; 
 
    background: -webkit-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
 
    background: -o-linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
 
    background: linear-gradient(#3f9a15, #388813, #3f9a15, #388813, #3f9a15); 
 
    border-radius: 6px !important; 
 
    -moz-border-radius: 6px !important; 
 
    color: white 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a:hover, 
 
.navbar.navbar-default .navbar-nav > li > a { 
 
    color: white; 
 
    /*Sets the text hover color on navbar*/ 
 
    font-size: 1.2em; 
 
} 
 
.navbar.navbar-default .navbar-nav > li > a:hover, 
 
.navbar.navbar-default .navbar-nav > li > a:focus { 
 
    color: white; 
 
    /*Sets the text hover color on navbar*/ 
 
    text-decoration: underline; 
 
} 
 
.navbar.navbar-default .navbar-nav > .active > a, 
 
.navbar.navbar-default .navbar-nav > .active > a:hover, 
 
.navbar.navbar-default .navbar-nav > .active > a:focus { 
 
    background: none; 
 
    color: white; 
 
    text-decoration: underline; 
 
} 
 
@media (max-width: 992px) and (min-width: 768px) { 
 
    .navbar.navbar-default .navbar-nav > li > a { 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
    white-space: nowrap; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home<span class="sr-only">(current)</span></a> 
 

 
     </li> 
 
     <li> <a href="aboutus.html">About Us</a> 
 
     </li> 
 
     <li> <a href="whoweare.html">Who We Are</a> 
 
     </li> 
 
     <li> <a href="mission.html">Mission</a> 
 
     </li> 
 
     <li> <a href="activities.html">Activities</a> 
 
     </li> 
 
     <li> <a href="gallery.html">Gallery</a> 
 
     </li> 
 
     <li> <a href="donate.html">Donate</a> 
 
     </li> 
 
     <li> <a href="sitemap.html">Sitemap</a> 
 
     </li> 
 
     <li> <a href="contactus.html">Contact Us</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

Answer 2

我已經成功了，但沒有突破<nobr>標籤，但這不是一個最好的公關actice。也可以在CSS中使用inline white-space：nowrap屬性。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr