Wordpress Navbar - 折叠按钮不出现 Bootstrap
Posted
技术标签:
【中文标题】Wordpress Navbar - 折叠按钮不出现 Bootstrap【英文标题】：Wordpress Navbar - Collapsed Button Not Appearing Bootstrap 【发布时间】：2015-02-13 17:27:09 【问题描述】：我正在尝试在自定义主题中设置引导导航栏，但由于某种原因无法弄清楚为什么这不起作用。
这是来自 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"
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？ 现在将修改问题 你在<button 行的末尾有两个>>...虽然不确定这是问题所在
@mevius 感谢您发现它，不幸的是它没有解决它
检查这个 bootply 并尝试在你的代码中复制它：bootply.com/bCVSQ7jHVm
【参考方案1】：
代码中有一些错误：
<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">
注意 2 个“类”属性：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"
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>
【讨论】：
以上是关于Wordpress Navbar - 折叠按钮不出现 Bootstrap的主要内容，如果未能解决你的问题，请参考以下文章