Twitter Bootstrap and mobile navbar

Question

私はWordpressで自分のブログのレスポンシブなレイアウトを作ろうとしていますが、モバイルデバイスのnavbarで問題を乗り越えることはできません。

<header class="span8" id="top-header"> 
<nav class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <?php 
      wp_nav_menu(array(
       'menu' => 'Top menu', 
       'menu_class' => 'nav' 
      )); 
      ?> 
      <ul class="nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
        <?php 
        $args = array(
         'exclude' =>'1', 
         'orderby' =>'name', 
         'order'  => 'ASC' 
        ); 
        foreach(get_categories($args) as $category): ?> 
         <li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li> 
        <?php endforeach; ?> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage"> 
    <hgroup class="row-fluid"> 
     <?php if(is_single()):?> 
      <h2 class="like-h1">My blog</h2> 
     <?php else: ?> 
      <h1>My blog</h1> 
     <?php endif; ?> 
     <h2>Bla bla bla</h2> 
    </hgroup> 
</a> 
</header> 

モバイルデバイスでは、ドロップダウンはTwitterブートストラップの例のようには機能しませんが、ナビゲーションバーからのすべてのリンクが表示されます。それはトグルしません。 my blog example

Answer 1

<div class="nav-collapse">..</div> div内にメニューをラップして、画面のサイズ変更/モバイルビューでメニューを折りたたむ必要があります。また、私はこの方法は、画面のサイズを変更するメディアクエリ、あなたがあなたのページheaderからあなた固定NAVを抜け出すとbodyタグの後にそれを隔離示唆

HTML

<header class="span8" id="top-header"> 
<nav class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <div class="nav-collapse"> 
       <?php 
       wp_nav_menu(array(
        'menu' => 'Top menu', 
        'menu_class' => 'nav' 
       )); 
       ?> 
       <ul class="nav"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Categories <b class="caret"></b></a> 
         <ul class="dropdown-menu"> 
         <?php 
         $args = array(
          'exclude' =>'1', 
          'orderby' =>'name', 
          'order'  => 'ASC' 
         ); 
         foreach(get_categories($args) as $category): ?> 
          <li><a href="<?php echo get_category_link($category->term_id); ?>" title="Category: <?php echo $category->name; ?>"><?php echo $category->name; ?></a></li> 
         <?php endforeach; ?> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</nav> 
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('title'); ?> - Back to the homepage"> 
    <hgroup class="row-fluid"> 
     <?php if(is_single()):?> 
      <h2 class="like-h1">My blog</h2> 
     <?php else: ?> 
      <h1>My blog</h1> 
     <?php endif; ?> 
     <h2>Bla bla bla</h2> 
    </hgroup> 
</a> 
</header> 

：これを試してみてくださいまたはheaderを囲むスタイルは、上部のナビゲーションバーには影響しません。これはモバイルビューでは修正しないでください。