使用bootstrap 3 navbar導致崩潰異常

Here我已經在wordpress中使用Bootstrap 3導航欄生成了一個公共內容navwalker。當達到網格斷點時它應該崩潰。但它顯示了一種意想不到的行爲，它顯示按鈕被點擊前沒有正確樣式之前的切換內容。使用bootstrap 3 navbar導致崩潰異常

bs collapse插件存在。它之前做了一些改變，但我在某處失敗了。

我會感謝您的幫助。這裏是我的代碼：

<div id="twitterbootstrap"> 
<nav class="navbar navbar-default <?php if (!(is_front_page())): echo "navbar-fixed-top"; endif; ?>" role="navigation"> 
<div class="container" style="padding: 0;"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <?php 
      wp_nav_menu(array(
       'menu'    => 'primary', 
       'theme_location' => 'primary', 
       'depth'    => 2, 
       'container'   => 'div', 
       'container_class' => 'collapse navbar-collapse', 
        'container_id'  => 'bs-example-navbar-collapse-1', 
       'menu_class'  => 'nav navbar-nav', 
       'fallback_cb'  => 'wp_bootstrap_navwalker::fallback', 
       'walker'   => new wp_bootstrap_navwalker()) 
      ); 
     ?> 
    </div> 
</nav>

來源

2014-09-12 radscheit

你錯過了'＃twitterbootstrap'的結尾div - 是你的帖子被省略還是實際上缺失？ – Mike 2014-09-12 09:56:55

@mikemike：謝謝你的建議。我只是忘了在這裏複製這個。 – radscheit 2014-09-12 13:36:23

解決了這一問題：

enter image description here

當菜單擴展： enter image description here

這裏的問題是，你要覆蓋引導的默認樣式您theme.css文件，特別是theme.css line: 187：

.navbar-default, .navbar .navbar-nav, .navbar-collapse { 
    display: inline-block !important; 
    float: none; 
    font-size: 14px !important; 
    height: 50px; 
    margin: 0; 
    text-align: center; 
    vertical-align: top; 
    width: 100%; 
}

and theme.css line: 207

.navbar-default .container div, .navbar .navbar-nav .container div, .navbar-collapse .container div, .navbar-default .container-fluid, .navbar .navbar-nav .container-fluid, .navbar-collapse .container-fluid { 
    background-color: #eef8fd; 
    float: none; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}

刪除這兩個，你很好去。

來源

2014-09-12 11:05:12 hamid

非常感謝！有效。 – radscheit 2014-09-12 12:59:43

我注意到幾個問題在這裏，和我到目前爲止已經搞砸了Firebug的，我已經達到的地步，其中的內容在按鈕被實際按下之前，摺疊菜單不顯示。

這是我從.navbar-default, .navbar .navbar-nav, .navbar-collapse起飛display: inline-block !important;實現的。

摺疊菜單還有一些奇怪的問題，因爲在摺疊效果實際發生之後它會被打平。試圖弄清楚，如果你比我快，通知我！

來源

2014-09-12 10:39:09 ProDexorite

非常感謝！它有幫助。現在我將嘗試使用Hamids解決方案來解決您提到的奇怪問題。 – radscheit 2014-09-12 12:52:11

Hamids建議爲奇怪的問題工作。 – radscheit 2014-09-12 12:59:11

使用bootstrap 3 navbar導致崩潰異常

回答

相關問題