Wordpress集成bootstrap navbar-fixed-top

时间:2013-09-30 14:27:24

标签: wordpress twitter-bootstrap menu navbar

我正在尝试将我的静态网站移植到基于wordpress的网站上,以便我可以轻松地进行博客,新闻和RSS提要。我遇到了一个问题但是当使用bootstraps navbar-fixed-top插件时。我无法让它正确坐着,一切都对齐到页面的最左边,图像没有出现,我一整天都在乱搞它没有结果。有人可以帮帮我吗?

这是我的wordpress代码:

  <div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo-menu.png" ></a>
    </div>
<nav class="navbar navbar-default navbar-fixed-top">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' =>   'navbar-collapse collapse', 'items_wrap' => '<ul class="nav navbar-nav">%3$s</ul>' ) ); ?>
</div>
</nav>

以下是我的静态网站上的代码:

    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo-menu.png" ></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="blog.php">Blog</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

1 个答案:

答案 0 :(得分:1)

我想通了,以下方法适用于遇到类似情况的人,这里是代码:

  <!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo-menu.png" ></a>
    </div>
    <div class="navbar-collapse collapse">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'navbar-collapse collapse', 'items_wrap' => ' <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">%3$s  </ul>
    </div><!--/.nav-collapse -->' ) ); ?></nav>