Bootstrap navbar类无法正常工作

时间:2017-07-29 06:42:24

标签: php html css wordpress twitter-bootstrap

这是没有php包含在ul li标签内的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

3 个答案:

答案 0 :(得分:0)

我们将编写此代码以向您显示导航

<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>

并删除此代码

{{1}}

答案 1 :(得分:0)

在菜单

的模板中添加以下代码
<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>

答案 2 :(得分:0)

  

如果你想要一个理想的解决方案,你可以使用助行器课程

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

访问此链接:https://stackoverflow.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>