如何在WordPress中添加多列引导程序菜单?

时间:2015-04-15 08:02:52

标签: wordpress twitter-bootstrap

我想在WordPress中添加3列引导菜单,但我无法做到这一点。我已经尝试了很多,但子菜单和列不是显示。谁能帮帮我吗。

这是我的引导代码。

<nav class="navbar navbar-default" role="navigation">

  <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <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="<?php bloginfo('url')?>">
            <img alt="Brand" src="img/is-logo.png">
          </a>
    </div>
    <!--/.navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Information <b class="caret"></b></a>
              <ul class="dropdown-menu multi-column columns-3">
                <div class="row">
                  <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                      <li><a href="#"><span class="icon-airplane"></span>&nbsp; &nbsp; Airlines</a></li>
                      <li><a href="#"><span class="icon-github"></span>&nbsp; &nbsp; Animal</a></li>
                      <li><a href="#"><span class="icon-apple"></span>&nbsp; &nbsp;Apple</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
                           Bangladesh
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-twitter"></span>&nbsp; &nbsp; Birds</a></li>
                      <li><a href="#"><span class="icon-droplet"></span>&nbsp; &nbsp; Blood</a></li>
                      <li><a href="#"><span class="icon-git-cat"></span>&nbsp; &nbsp; Cat</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
                           China
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Denmark">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                            </span>Denmark
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-library"></span>&nbsp; &nbsp; Education</a></li>
                    </ul>
                  </div>
                  <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                      <li><a href="#"><span class="icon-airplane"></span>&nbsp; &nbsp; Airlines</a></li>
                      <li><a href="#"><span class="icon-github"></span>&nbsp; &nbsp; Animal</a></li>
                      <li><a href="#"><span class="icon-apple"></span>&nbsp; &nbsp;Apple</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
                           Bangladesh
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-twitter"></span>&nbsp; &nbsp; Birds</a></li>
                      <li><a href="#"><span class="icon-droplet"></span>&nbsp; &nbsp; Blood</a></li>
                      <li><a href="#"><span class="icon-git-cat"></span>&nbsp; &nbsp; Cat</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
                           China
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Denmark">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                            </span>Denmark
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-library"></span>&nbsp; &nbsp; Education</a></li>
                    </ul>
                  </div>
                  <div class="col-sm-4">
                    <ul class="multi-column-dropdown">
                      <li><a href="#"><span class="icon-airplane"></span>&nbsp; &nbsp; Airlines</a></li>
                      <li><a href="#"><span class="icon-github"></span>&nbsp; &nbsp; Animal</a></li>
                      <li><a href="#"><span class="icon-apple"></span>&nbsp; &nbsp;Apple</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Bangladesh"><span class="path1"></span><span class="path2"></span></span>
                           Bangladesh
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-twitter"></span>&nbsp; &nbsp; Birds</a></li>
                      <li><a href="#"><span class="icon-droplet"></span>&nbsp; &nbsp; Blood</a></li>
                      <li><a href="#"><span class="icon-git-cat"></span>&nbsp; &nbsp; Cat</a></li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_China"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"></span><span class="path11"></span><span class="path12"></span><span class="path13"></span><span class="path14"></span><span class="path15"></span><span class="path16"></span><span class="path17"></span><span class="path18"></span><span class="path19"></span><span class="path20"></span><span class="path21"></span><span class="path22"></span><span class="path23"></span></span>
                           China
                        </a>
                      </li>
                      <li>
                        <a href="#">
                          <span class="icon-Flag_of_Denmark">
                            <span class="path1"></span><span class="path2"></span><span class="path3"></span>
                            </span>Denmark
                        </a>
                      </li>
                      <li><a href="#"><span class="icon-library"></span>&nbsp; &nbsp; Education</a></li>
                    </ul>
                  </div>
                </div>
              </ul>
          </li>
        </ul>
    </div>
  </div>
</nav>

1 个答案:

答案 0 :(得分:0)

下拉菜单在wordpress中无法正常工作,因此请使用Walker Class使其正常工作