bootstrap 带有自定义媒体查询的移动菜单

Question

我有一个应用了媒体查询的 bootstrap 菜单。此查询应在可扩展 "hamburger mobile icon".

下的移动视图中显示额外内容

问题

它不再显示图标，我不确定是我的错误还是 bootstrap 问题。有人可以在 bootstrap 中了解更多的经文，看看他们是否能看出问题所在。

我的菜单

<nav class="navbar navbar-inverse-light-grey navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <?php
            $this->load->helper('html');
            $img = base_url('img/Servare.png');
            $path = 'home';
            ?>
            <div class="logo-img">
                <?php
                echo anchor($path, img($img));
                ?>
            </div>
        </div>

        <div id="desktop-content">
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <?php
                    if ($this->session->userdata('id')) { ?>
                        <li><?php echo anchor('login/logout', 'Logout'); ?></li>
                        <?php
                    } else { ?>
                        <li><?php echo anchor('login', 'Login'); ?></li>
                        <li><?php echo anchor('login/signup', 'Sign up'); ?></li>

                        <?php
                    }
                    ?>
                </ul>
            </div>
        </div>
        <div id="mobile-content">
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <?php
                    if ($this->session->userdata('id')) { ?>
                        <li><?php echo anchor('members', 'Your Dashboard'); ?></li>
                        <li><?php echo anchor('profile', 'Account Overview'); ?></li>
                        <li><?php echo anchor('banks', 'Add Regular Savings'); ?></li>
                        <li><a href="#">Notification Accounts<br>(coming soon)</a></li>
                        <li><a href="#">Fixed rate Bonds<br>(coming soon)</a></li>
                        <?php
                    } else { ?>
                        <li><?php echo anchor('login', 'Login'); ?></li>
                        <li><?php echo anchor('login/signup', 'Sign up'); ?></li>

                        <?php
                    }
                    ?>
                </ul>
            </div>
        </div>
    </div>
</nav>

我的查询

@media screen and (min-width: 0px) and (max-width: 600px) {
    #mobile-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 601px)  {
    #mobile-content { display: none; }   /* hide it elsewhere */
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    #desktop-content { display: none; }  /* hide iton small screens */
}

@media screen and (min-width: 601px) {
    #desktop-content { display: block; }   /* show it elsewhere */
}

Answer 1

按钮中的数据目标设置为#navbar（指向一个id）。但是该 id 在页面上出现了两次（这是不允许的）。现在只有移动页面应该有使用按钮的下拉菜单，所以你可以通过更改按钮来解决它：

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

然后你必须在移动内容div处更改id。将其更改为按钮指向的 ID。

<div id="navbar-mobile" class="navbar-collapse collapse">

这对我来说已经解决了。希望这对您有所帮助！

bootstrap 带有自定义媒体查询的移动菜单

bootstrap mobile menu with custom media query

html

css

php

media-queries

twitter-bootstrap