Question

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

<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>

由于我使用了网格系统，所有内容都崩溃到一定程度，然后整个标题完全混乱并堆叠，这就是为什么我想尝试让菜单按钮在达到该断点时进入下拉菜单。任何帮助都非常感谢。谢谢！

Answer 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结构，您需要设置上述按钮及其各种状态的样式。您还需要解决间距问题（下拉列表以这种方式向下推动元素。）

Answer 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>

在<a class="navbar-brand" href="#">

img

col-md-6列，添加类collapse navbar-collapse和 id="bs-example-navbar-collapse-1"
该中的div添加了类nav navbar-nav
制作header一个nav元素
提供nav课程navbar navbar-default
删除行
col-md-6列中的div，删除该行并将其设为ul 将div中的li转换为toggle s

基本上你现在所做的就是采取必要的步骤来编写一个bootstrap导航。仔细看看http://getbootstrap.com/components/#navbar处的示例您会发现它实际上并没有使用网格系统。

请注意，您需要包含引导程序javascript才能使用<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>功能。

另外，请勿在导航中添加include 'database.php'; $user = $_POST['user']; $gender = $_POST['gender']; $description = $_POST['description']; if (isset($user) && isset($gender) && isset($description) && $user != '' && $gender != '' && $description != '') { $insert_query = "INSERT INTO my_table user, gender, description VALUES '$user','$gender', '$description'"; $rks = mysqli_query($con, "SELECT up_votes, down_votes FROM my_table ORDER BY id DESC LIMIT 1"); $row = mysqli_fetch_row($rks); if (mysqli_query($con, $insert_query)) { $insert = array($user, $gender, $description, $row[0], $row[1]); echo json_encode($insert); } else { echo mysqli_error($con); } } else { echo 'Failed: ' . mysqli_error($con); }个元素。段落在那里没有任何意义。

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

2 个答案: