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

Question

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

我可以单击按钮，然后菜单会在显示后立即显示和隐藏。

我使用了很多变通方法和修复，在 bootstrap.js 中禁用 touchstart 或更改导航栏的 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 时，引导程序使其全角 对于小于screen-lg-min 的元素。所以col-xs-12 col-sm-12 已经过时了。
• 页脚有问题。因为 结构不当： 再次.container > .row > .container。

干杯！希望对你有帮助。