Twitter Bootstrap和移动导航栏

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 Bootstrap的示例那样有效,但它显示了导航栏中的每个链接.它没有切换.你可以在这里看到它:我的博客示例

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将不会影响顶部导航栏,这不应该固定在移动视图.