将自定义导航栏转换为引导程序上的下拉菜单答案

【问题标题】：Converting custom nav bar to dropdown menu on bootstrap将自定义导航栏转换为引导程序上的下拉菜单
【发布时间】：2017-07-20 05:06:07
【问题描述】：

我希望在较小的屏幕（如手机和平板电脑）上查看时将导航栏转换为下拉菜单。问题是，我没有使用传统的引导导航栏系统，而是自己制作的。我知道通常的引导解决方案涉及使用导航类，但我不确定如何将它们集成到我自己的代码中，因为我一开始没有使用它们。对于平板电脑，我希望将主菜单按钮隐藏到带有切换按钮的下拉菜单中，同时将徽标保留在那里。这是我的代码：

<header class="main-header" id="Navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
            </div>
            <div class="col-md-6 text-center">
                <div class="row text-center">
                    <div class="col-md-2 offset-md-1">
                        <p class="NavBarButtons"> WHY US </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> FIX YOUR BILL </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> HOW IT WORKS </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> LEARN WITH US </p>
                    </div>
                    <div class="col-md-2">
                        <p class="NavBarButtons"> COMMERCIAL </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-3 offset-md-4">
                        <p class="NavBarButtons"> LOG IN </p>
                    </div>
                    <div class="col-md-4 md-offset-3">
                        <button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

因为我使用了网格系统，所以在某个点之前，一切都会很好地折叠，然后整个标题完全混乱并堆叠起来，这就是为什么我想尝试在到达断点时让菜单按钮进入下拉菜单的原因.非常感谢任何帮助。谢谢！

【问题讨论】：

请附上一些有关问题的屏幕截图以及您希望如何出现，这将有助于快速理解。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

当您尝试在 .navbar 之外执行此操作时，您会失去很多内置功能，但这是可以管理的。 .navbar-collapse 组件本身与更大组件的使用没有直接关系；您只需要包含 <button> 和折叠的包装器元素：

<header class="main-header" id="Navigation">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-3">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png">
            </div>

            <div class="col-xs-9 text-right">
                <div class="row">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-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>

                    <div class="collapse navbar-collapse text-center" id="menu-collapse">
                        <div class="col-md-2"><p class="NavBarButtons">WHY US</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">FIX YOUR BILL</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">HOW IT WORKS</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">LEARN WITH US</p></div>
                        <div class="col-md-2"><p class="NavBarButtons">COMMERCIAL</p></div>
                        <div class="col-md-1"><p class="NavBarButtons">LOG IN</p></div>
                        <div class="col-md-1"><button class="SignUp"><b>UNLOCK YOUR POWER</b></button></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</header>

...

您遇到问题的地方（以及为什么我建议使用整个 .navbar 结构，是您需要设置上述按钮及其各种状态的样式。您还需要解决间距问题（下拉菜单推送元素以这种方式下降）。

【讨论】：

【解决方案2】：

这很糟糕，但是..您可以通过对代码进行一些调整来做到这一点，这样您最终会得到这样的结果：

<nav class="main-header navbar navbar-default" id="Navigation">
    <div class="container-fluid">
        <div class="col-md-3 navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
            <a class="navbar-brand" href="#">
                <img class="HeaderLogo img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1499450095/Enpowered_Logo_k69cqw.png" style="width: auto;">
            </a>
        </div>
        <div class="col-md-6 text-center collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="text-center nav navbar-nav">
                <li class="col-md-2 offset-md-1">
                    <p class="NavBarButtons"> WHY US </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> FIX YOUR BILL </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> HOW IT WORKS </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> LEARN WITH US </p>
                </li>
                <li class="col-md-2">
                    <p class="NavBarButtons"> COMMERCIAL </p>
                </li>
            </ul>
        </div>
        <div class="col-md-3">
            <div class="row">
                <div class="col-md-3 offset-md-4">
                    <p class="NavBarButtons"> LOG IN </p>
                </div>
                <div class="col-md-4 md-offset-3">
                    <button class="SignUp"><b> UNLOCK YOUR POWER </b></button>
                </div>
            </div>
        </div>
    </div>
</nav>

这就是我所做的：

给col-md-3类navbar-header

在里面添加

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>

在您的img 周围添加<a class="navbar-brand" href="#">
col-md-6 列，添加类 collapse navbar-collapse 和 id="bs-example-navbar-collapse-1"
那个div中的添加类nav navbar-nav
将header 设为nav 元素
给nav类导航栏navbar-default
删除行
col-md-6 列中的 div，删除该行并使其成为 ul 把里面的divs变成lis

您现在所做的基本上是采取必要的步骤来编写引导导航。好好看看http://getbootstrap.com/components/#navbar的例子你会看到它实际上并没有使用网格系统。

请记住，您需要包含引导 javascript 才能使用 toggle 功能。

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

另外，不要在导航中放置p 元素。那里的段落没有任何意义。

【讨论】：