logo标签列表

WordPress导航栏-折叠按钮不显示Bootstrap

jqueryhtmlcsswordpresstwitter-bootstrap
3
我正在尝试在自定义主题中设置一个bootstrap导航栏，但是我无法弄清为什么它没有起作用。这是header.php源代码的代码。（注意：导航栏非常好用，但移动设备上的折叠式导航栏按钮不起作用）谢谢预先帮助。
<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title><?php echo get_the_title( $ID ); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
  <?php wp_enqueue_script("jquery"); ?>
  <?php wp_head(); ?>
</head>
<body>

<div id="header">
  <div class="navbar navbar-fixed-top" role="navigation">
      <div class="container">
        <button class="btn btn-navbar" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" 
         alt="Electricians in Cardiff" class="img-responsive"></a>
        <div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="/index.php">Home</a></li>
            <li><a href="/about/">About</a></li>
            <li><a href="/services/">Services</a></li>
            <li><a href="/blog/">Blog</a></li>
            <li><a href="/areas-we-cover/">Areas</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </div>
</div>

<div class="container">

我跟着教程做，这是我在样式表中添加的内容：

@import url('bootstrap/css/bootstrap.css'); 
@import url('bootstrap/css/bootstrap-responsive.css'); 
body { 
    padding-top: 70px; 
}

这是在functions.php文件里的代码。

<?php 

function wpbootstrap_scripts_with_jquery()
{
    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );


if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>
你是否已经包含了样式表？你是否已经包含了JavaScript？ - rnevius
will modify the question now - Frog82
你的<button>行末有两个>>，不确定是否是问题所在。 - rnevius
@mevius 谢谢你指出来，不过它并没有修复它。 - Frog82
请查看此Bootply并尝试在您的代码中复制它：http://www.bootply.com/bCVSQ7jHVm - Leandro Carracedo
1个回答
0

代码中存在一些错误：

<button class="btn btn-navbar" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">>

应该是：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

请注意两个“class”属性：class="btn btn-navbar" 和 class="navbar-toggle"
此外，还有一些DIV放错了位置。
清理后的代码：
<div id="header">
    <div class="navbar navbar-fixed-top" role="navigation">
        <div class="container">

           <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
               </button>
               <a class="navbar-brand"><img src="/img/logo.png" 
alt="Electricians in Cardiff" class="<?php bloginfo('template_directory'); ?>/img-responsive"></a>
           </div>

           <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav navbar-right">
                 <li><a href="/index.php">Home</a></li>
                 <li><a href="/about/">About</a></li>
                 <li><a href="/services/">Services</a></li>
                 <li><a href="/blog/">Blog</a></li>
                 <li><a href="/areas-we-cover/">Areas</a></li>
               </ul>
           </div><!--/.nav-collapse -->
        </div>
    </div>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接