带有自定义媒体查询的引导移动菜单答案

【问题标题】：bootstrap mobile menu with custom media query带有自定义媒体查询的引导移动菜单
【发布时间】：2016-07-19 02:52:14
【问题描述】：

我有一个已应用媒体查询的引导菜单。此查询应在可展开的“汉堡移动图标”下的移动视图中显示额外内容。

问题

它不再显示图标，我不确定是我的错误还是引导问题。有人可以在引导程序中找到更多的诗句，看看他们是否能看到问题。

我的菜单

<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 */
}

【问题讨论】：

从切换按钮中移除 collapsed 类
为什么不合并两个媒体查询？
@RobertoDeLaParra 你是什么意思
@Skelly 但没用
@media screen and (min-width: 0px) and (max-width: 600px) { #mobile-content { display: block; } /* 在小屏幕上显示 / #desktop-content { display: none; } / 在小屏幕上隐藏 */ }

标签： php html css twitter-bootstrap media-queries

【解决方案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">

这为我解决了问题。希望这会有所帮助！

【讨论】：