Question

我已经使用Bootstrap 4为Wordpress制作了主题。我已经将我的新布局与Wordpress网站连接起来，但是仍然无法使用navbar处理。我尝试了互联网上的许多选项，但无法使我的导航栏正常工作

我已经阅读了Wordpress Codex并尝试了此操作，但是我不知道如何在我的代码中使用它

$defaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', '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>', 'item_spacing' => 'preserve',
    'depth' => 0, 'walker' => '', 'theme_location' => '' );

这是我的导航代码：

<body>
    <nav class="navbar navbar-light bg-towary navbar-expand-lg">                   
           <div class="container">              
           <a class="navbar-brand" href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/img/logo.png" class="logo-main d-inline-block mr-1 align-bottom" alt="My site logo"></a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false" aria-label="Navbar button mobile">
        <span class="navbar-toggler-icon"></span>                                </button>

        <div class="collapse navbar-collapse" id="mainmenu">            
            <ul class="navbar-nav w-75 justify-content-center">             
                 <li class="nav-item active">
                      <a class="nav-link" href="index.php"> HOME </a>
                 </li>                  
                 <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="submenu" aria-haspopup="true"> Page 1</a>                     
                 <div class="dropdown-menu" aria-labelledby="submenu">                      
                      <a class="dropdown-item" href="#"> Page 1 submenu 1 </a>                          
                 <div class="dropdown-divider"></div>                           
                      <a class="dropdown-item" href="#"> Page 1 submenu 2 </a>                                                  
                 </div>                                 
                 </li>                  
                 <li class="nav-item">
                      <a class="nav-link" href="#"> Page 2</a>
                 </li>                  
                 <li class="nav-item">
                      <a class="nav-link" href="#"> Page 3</a>
                 </li>                  
                 <li class="nav-item">
                      <a class="nav-link" href="#"> Page 4 </a>
                 </li>                  
                 <li class="nav-item">
                      <a class="nav-link" href="#"> Page 5</a>
                 </li>                  
                 <li class="nav-item">
                      <a class="nav-link" href="#"> Page 6</a>
                 </li>      
            </ul>
            <!-- Searchbar -->    
            <form class="form-inline w-25 justify-content-center">
               <input class="form-control mr-1 w-50 xs-col-12" type="search" placeholder="Search..." aria-label="Search">
               <button class="btn btn-light xs-col-12" type="submit">Szukaj</button>
             </form>                                                    
             </div>                    
          </div>        
    </nav>

Answer 1

Bootstrap需要使用javascript进行导航栏下拉菜单。您可以在这里找到有关它的更多信息：https://getbootstrap.com/docs/4.0/components/navbar/

首次使用Bootstrap4 + Wordpress组合

1 个答案: