Twitter Bootstrap和移动导航栏

Question

我试图在Wordpress上为我的博客做出响应式布局，但我无法克服移动设备上导航栏的问题。

<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 Bootstrap的示例上不起作用，但它显示了来自导航栏的每个链接。它不切换。你可以在这里看到：my blog example

Answer 1

你需要将你的菜单包装在<div class="nav-collapse">..</div> div内，以便在屏幕调整大小/移动视图时折叠菜单。试试这个：

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页打破了你的固定导航和body标记后隔离开来，这样，当你调整屏幕的媒体查询或围绕您的header的样式不会影响顶部导航栏，这不应在移动视图中修复。