Question

我有以下菜单，我使用Bootstrap 3.2。菜单+切换按钮适用于Android上的任何浏览器，但iOS。

我可以点击按钮然后菜单会显示＆amp;显示后立即隐藏。

我使用了大量的解决方案和修复，在bootstrap.js中禁用touchstart或更改navbar的z-index。。。但是对于这个问题它无论如何都不会帮助我。

单击切换按钮后菜单似乎显示但我看不到任何内容。关闭菜单时，我必须再次触摸切换按钮。再次触摸再次打开菜单。

如果您有www.vietwash.vn

的iPhone，那么你可以检查一下

感谢您对我的问题的关注。

<nav class="navbar navbar-default col-xs-12 col-sm-12 col-lg-12"
                    role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <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="#"> <jdoc:include type="modules"  name="top-logo" style="xhtml" />
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav">

                            <li id="home" class="active"><a href="<?php JUri::base();?>">Trang
                                    chủ</a></li>

                            <li id="intro" class="dropdown"><a href="#"
                                class="dropdown-toggle" data-toggle="dropdown"> Giới thiệu <b
                                    class="caret"></b>
                            </a>
                                <ul class="dropdown-menu">
                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=1"?>">Về
                                            chúng tôi</a></li>

                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=2"?>">Công
                                            nghệ Vietwash</a></li>

                                    <li><a
                                        href="<?php echo JUri::base() . "index.php?option=com_content&view=article&id=6"?>">Trải
                                            nghiệm phòng chờ</a></li>
                                </ul></li>
                            <li id="service"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=featured&Itemid=106"?>">Dịch
                                    vụ</a></li>
                            <li id="news"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=category&layout=blog&id=9&Itemid=105"?>">Tin
                                    tức</a></li>
                            <li id="contact"><a
                                href="<?php echo JUri::base() . "index.php?option=com_content&view=featured&Itemid=107"?>">Liên
                                    hệ</a></li>

                        </ul>
                    </div>
                </nav>

Answer 1

我猜你的CSS存在问题。看看responsive.css中的第188行。有@media only screen and (max-width: 480px) and (min-with: 321px)。

尝试删除：

position: absolute
top: 50px

或将其替换为position: static。

补充说明

你正在使用col-xs-12 col-sm-12 col-lg-12 - 而是使用 container-fluid
使用col-lg-8 bootstrap时，将其设为全宽对于小于screen-lg-min的元素。所以col-xs-12 col-sm-12 已经过时了。
页脚有问题。因为结构不合理：再次.container > .row > .container。

干杯队友！我希望它有所帮助。

Bootstrap 3.2下拉菜单切换不在iPhone上工作

1 个答案: