Twitter Bootstrap 和移动导航栏

Posted 2023-03-06

【中文标题】Twitter Bootstrap 和移动导航栏

【英文标题】：Twitter Bootstrap and mobile navbar

【发布时间】：2012-05-03 11:46:25

【问题描述】：

我正在尝试在 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

【参考方案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 的媒体查询或样式将不会影响顶部导航栏，不应固定在移动视图上。

【讨论】：

太棒了！这就是我的问题的答案。谢谢！