避免在导航中使用 ul li 并使用带有切换菜单的 div，我该如何实现？

Question

我的网站菜单是这样的：

            <div class="container-fluid">
            <div class="row">
                <nav id="menu">
                    <div class="col-sm-12 col-md-2 active-link">
                        <div class="vertical-align" >
                            <img class="img-responsive" src="img/logo.png" alt="logo">
                        </div>

                    </div>
                    <div class="col-sm-3 col-md-2 nonactive-link">
                        <div class="vertical-align" >
                            <a href="#">MENU<br>ONE</a>
                        </div>
                    </div>
                    <div class="col-sm-3 col-md-2 nonactive-link">
                        <div class="vertical-align" >
                            <a href="#">MENU<br>TWO</a>
                        </div>
                    </div>
                    <div class="col-sm-2 col-md-2 nonactive-link">
                        <div class="vertical-align" >
                            <a href="#">MENU THREE</a>
                        </div>
                    </div>
                    <div class="col-sm-2 col-md-2 nonactive-link">
                        <div class="vertical-align" >
                            <a href="#">MENU FOUR</a>
                        </div>
                    </div>
                    <div class="col-sm-2 col-md-2 nonactive-link">
                        <div class="vertical-align" >
                            <a href="#">MENU FIVE</a>
                        </div>
                    </div>
                </nav>
            </div>
        </div>

我没有使用来自 bootstrap 的原始导航，它是一个列表 (ul li ..)

有没有一种方法可以仅使用带有 col-xs-12 的 div 来实现切换菜单？

我怎样才能使用我的代码来实现仅使用 div 和 col 的代码？

非常感谢:)

Answer 1

为了真正让它成为一个导航菜单，您需要在最父导航元素 <nav class="navbar navbar-default"> 上使用一些 bootstrap 实用程序类，然后您需要添加菜单 "three lines" 图标 HTML

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

然后您需要向实际导航链接 <div class="collapse navbar-collapse" id="navbar-collapse"> 的包装器添加更多实用程序类和 ID，确保该 ID 与导航按钮本身中的 data-target 相匹配.

关于此的 bootstrap 文档是 HERE

我还用你原来的 HTML 做了一个 JSFIDDLE 并修改了它，如果这有意义，请告诉我。

避免在导航中使用 ul li 并使用带有切换菜单的 div，我该如何实现？

Avoid ul li in nav and use divs with toggle menu, how can i achieve?

navbar

twitter-bootstrap-3