Bootstrap Static Top Navbar无法正常工作

时间:2017-07-18 11:14:26

标签: php wordpress twitter-bootstrap function

我是StackOverFlow社区的新手,希望这是正确的方式!我已经看到了同一主题的答案,但我无法弄清楚我遇到的问题。

我在Wordpress页面上工作,使用functions.php加载我的脚本。我正在尝试安装'static top navbar' Bootstrap menu,但它没有正确显示:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">


<?php wp_head(); ?>

</head>

<body>


	<header>
		

		<!-- Static navbar -->
		<nav class="navbar navbar-default navbar-static-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="/">Home</a>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-right">
						<li class="active"><a href="#">menu 1</a></li>
						<li><a href="#">menu 2</a></li>
						<li><a href="#">menu 3</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</nav>		


	</header>




	<div class="container">
		<div class="jumbotron">
			<h1>Coucou c'est nous</h1>
		</div>	
	</div> <!-- /container -->	

	<section>
		<div class="container">

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->		

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->		

			<div class="m-dw-30">
				<div class="col-xs 2">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/yesfragile.jpg"
					alt="" class="img-fluid">
				</div>
				<div class="col-xs-10">
					<h1>Titre de l'article</h1>
					<p>description de l'article description de l'article description de l'article description de l'article</p>
				</div>
			</div> <!-- /m-dw-30 -->				

		</div><!-- /container -->	
	</section>



</body>






<?php wp_footer(); ?>

</html>

导航栏仅显示左侧带有clic按钮的“Home”按钮,下拉“menu1”,“menu2”和“menu3”。这不是static top navbar所呈现的内容。

以下是我的功能:

<?php

//=========================================
//============ loading scripts ============
//=========================================

define('LGMAC_VERSION', '1.0.2');

// front-end loading
function lgmac_scripts() {

	// styles loading
	wp_enqueue_style( 'lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all');
	wp_enqueue_style( 'lgmac_custom', get_template_directory_uri() . '/style.css', array('lgmac_bootstrap-core'), LGMAC_VERSION , 'all');


	// scripts loading
	wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), LGMAC_VERSION , true);

	wp_enqueue_script( 'lgmac_admin_script', get_template_directory_uri() . '/js/temporary_gallery.js', array('jquery', 'bootstrap-js'), LGMAC_VERSION , true);

} //end function lgmac_scripts

add_action('wp_enqueue_scripts', 'lgmac_scripts');






//=========================================
//============ Utilitaires ============
//=========================================

function lgmac_setup() {

	// thumbnail support
	add_theme_support( 'post-thumbnails' );

	// delete version generator
	remove_action('wp_head', 'wp_generator');

	// delete french quotation marks
	remove_filter('the_content', 'wptexturize');

	// title support
	add_theme_support('title-tag');

} // end lgmac_setup function

add_action('after_setup_theme', 'lgmac_setup');

我真的很感谢你的帮助!

1 个答案:

答案 0 :(得分:1)

@Vindhyachal Kumar,谢谢!我想这是因为我在functions.php文件中加载了bootstrap样式。它阻止了良好的bootstrap css版本。所以,我删除了这一行:

&#13;
&#13;
	wp_enqueue_style( 'lgmac_bootstrap-core', get_template_directory_uri() . '/css/bootstrap.min.css', array(), LGMAC_VERSION , 'all');
&#13;
&#13;
&#13;

我希望它不会对样式加载产生影响吗?