Bootstrap 导航栏类无法正常工作

Posted

技术标签:

【中文标题】Bootstrap 导航栏类无法正常工作【英文标题】：Bootstrap navbar class not working properly 【发布时间】：2018-01-05 06:36:36 【问题描述】：

这是 ul li 标签中不包含 php 的 html 代码：

<html>
<body>  
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                   <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>            
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Lifestyle</a></li>
                <li><a href="#">Adventure</a></li>
                <li><a href="#">Fashion<span class="caret"></span></a></li>
                <li><a href="#">Travel</a></li>
                <li><a href="#">Story</a></li>
            </ul>               
        </nav>
    </div>
</body>
</html>

这是在 ul li 标签中包含 php 的 html 代码：

<html>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>        
        <nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">             
                <?php
                    $args = array(
                        'theme_location' => 'primary',                          
                    );

                ?>
                <li><?php wp_nav_menu($args);?></li>                    
            </ul>               
        </nav>
    </div>
</body>
</html>

这是这样工作的导航栏图像： Working code image

这是未加载 css 类的导航栏图像： Image which is not loading css and links are different b'cause theme development function is called

【问题讨论】：

【参考方案1】：

我们将编写这段代码来显示导航

<?php 
           wp_nav_menu(array(
                    'theme_location' =>'primary',
                    'container' => 'nav',
                    'container_class' => 'navbar-collapse navbar',
                    'menu_class'      => 'nav navbar-nav navbar-right'
                ));
            ?>

并删除此代码

<nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">             
                <?php
                    $args = array(
                        'theme_location' => 'primary',                          
                    );

                ?>
                <li><?php wp_nav_menu($args);?></li>                    
            </ul>               
        </nav>

【讨论】：

【参考方案2】：

在您的菜单模板中添加以下代码

<html>
<body>  
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                   <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>            
        <nav class="navbar navbar-default">

         <?php
            $header_menu_defaults = array(
                'theme_location'  => 'primary',
                'menu'            => 'your menu name here',
                'container'       => '',
                'container_class' => '',
                'container_id'    => '',
                'menu_class'      => 'nav navbar-nav',
                'menu_id'         => '',
                'echo'            => true,
                'fallback_cb'     => 'wp_page_menu',
                'before'          => '',
                'after'           => '',
                'link_before'     => '',
                'link_after'      => '',
                'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                'depth'           => 0,
                'walker'         => ''
            );
            wp_nav_menu( $header_menu_defaults );
            ?>
        </nav>
    </div>
</body>
</html>

【讨论】：

【参考方案3】：

如果你想要一个理想的解决方案，你可以使用 walker 类

有一个像你这样的问题，你可以从中得到启发

访问此链接：https://***.com/a/11948374/5608642

但是如果你想要简单的东西，你可以试试这个代码

<html>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="text-center" style="margin-top: 15px;">
                <span><h2><?php bloginfo('name'); ?></h2></span>
                <p><h6><?php bloginfo('description'); ?></h6></p>
            </div>        
        <nav class="navbar navbar-default stroke">
            <ul class="nav navbar-nav">         

                 <?php
                     $navLocation = 'primary';
                     $nav = wp_get_nav_menu_object( $navLocation );
                     $navItems = wp_get_nav_menu_items( $nav->term_id, array( 'order' => 'DESC' ) );
                 ?>

                 <?php foreach( $navItems as $item ): ?>                    
                     <?php if ( !$item->menu_item_parent ): ?>
                          <li><a href="<?= $item->url; ?>"> <?= $item->title; ?> </a> </li>
                     <?php endif; ?>
                 <?php endforeach; ?>
            </ul>               
        </nav>
    </div>
</body>
</html>

【讨论】：

以上是关于Bootstrap 导航栏类无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章

Bootstrap 导航栏在移动设备上无法正常工作

Twitter Bootstrap 导航分隔线无法在谷歌浏览器上正常工作

Angular UI Bootstrap 响应式导航栏下拉菜单在新版本中无法正常工作

Bootstrap 无法与流星一起正常工作

Bootstrap 在 Angular 6 中无法正常工作

Bootstrap 崩溃在发布时无法正常工作（但它在本地工作）