居中導航欄摺疊鏈接時的延遲（1秒）

我有一個CSS問題，我甚至無法開始引起我的注意。我有一個帶有標準摺疊按鈕的導航欄，單擊時顯示鏈接行。我有一個CSS媒體查詢，綿延行和中心環節是這樣：居中導航欄摺疊鏈接時的延遲（1秒）

http://imageshack.us/a/img89/4940/t678.png

這裏是做拉伸和居中的CSS：

/* when the navbar becomes a button, center and stretch the dropdown links */ 
@media (max-width: 992px) { 
    div.navbar-collapse.navbar-ex1-collapse.navbar-right.in { 
    width: 100%; 
    text-align: center; 
    margin: 0 auto; 
    } 
}

不幸的是，當你第一次按可摺疊按鈕展開行，文本不會出現居中。它需要1000毫秒（1秒）的文本來居中對齊。你可以從字面上看它從屏幕的最左邊到中心。

這使我相信我在做我的CSS錯誤。

我該如何解決這個問題？

的HTML：

<!-- navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
     <!-- navbar header --> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#"> 
       <img class="img-responsive" src="assets/img/logo.png" > 
      </a> 
      </div> 
      <!-- collapse --> 
      <div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div> 
     </div> 
    </nav> 
<!-- /navbar -->

來源

2013-10-14 Joseph Malicke

我找到了解決辦法。

要立即居中文本不延誤

div.navbar-collapse.navbar-ex1-collapse.navbar-right.in

的CSS選擇器更改爲

div.navbar-collapse.navbar-ex1-collapse

來源

2013-10-14 05:26:56

謝謝你，我這個苦苦掙扎，你有一個交代？我的意思是我認爲這只是將課程添加到div然後添加到CSS中的時間，但爲什麼特別慢呢？ – Alburkerk

居中導航欄摺疊鏈接時的延遲（1秒）

回答

相關問題