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来实现切换菜单？

如何使用divs whit col来实现我的代码？

非常感谢：）

Answer 1

为了实际使其成为导航菜单，您需要在最主要的导航元素<nav class="navbar navbar-default">上使用一些引导实用程序类，然后您需要添加菜单＆＃34;三行＆＃34;图标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匹配。

这方面的引导文档是HERE

我还使用原始HTML制作了JSFIDDLE并对其进行了修改，如果有意义，请告诉我。

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

1 个答案: