Question

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

问题

它不再显示图标，我不确定它是我的错误还是引导问题。如果他们能够看到问题的话，可能会有人更多地使用引导程序。

我的菜单

<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在页面上出现两次（这是不允许的）。现在只有移动页面可能有使用按钮的下拉菜单，因此您可以通过更改按钮来修复它：

//Lingo 
on puppetize 
    repeat with channel = 1 to 30 
    _movie.puppetSprite(channel, TRUE) 
    end repeat 
end puppetize 

// Javascript 
function puppetize() 
{ 
    for(var channel=1;channel<30;channel++) 
    { 
    _movie.puppetSprite(channel, true); 
    } 
}

然后您必须更改移动内容div的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>

为我修好了。希望这有帮助！

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

1 个答案: