Bootstrap与iphone折叠菜单间距问题

Question

我正在使用自举导航，它在Android和Chrome中折叠时效果很好。 但是当我在iPhone上测试它时，下拉列表在屏幕上显得更低，我不知道是什么原因引起了这种间距。

下拉列表也总是出现在其他项目后面，例如带有iphone的照片或滑块（在Android中完美运行）。

<header>
        <div class="header-container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">


                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <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="#">
                     <img class="tbc-logo" src="/NewDesign/img/tbc-logo.png">
                        </a>
                    </div>

                        <div id="language">
                              <a href="../ar/default.aspx" style="padding-right: 10px;">عربي</a>
                        </div>
                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">



                        <!--NAVIGATION -->
                        <ul class="nav navbar-nav ">

                            <li><a href="default.aspx">Home <span class="sr-only">(current)</span></a></li>


                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="AboutUs.aspx">About TBC </a></li>
                                    <li><a href="projects.aspx">Projects</a></li>

                                </ul>
                            </li>


                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Our Programs <span class="caret"></span></a>
                                <ul class="dropdown-menu">

                                    <li><a href="PrivateSchools.aspx">Private Schools</a></li>
                                   <!-- <li role="separator" class="divider"></li>-->

                                    <li><a href="Investment.aspx">Investment </a></li>
                                </ul>
                            </li>




                            <li><a href="PreQualification.aspx">Prequalification <span class="sr-only">(current)</span></a></li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Careers <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="vacancies.aspx"> Vacancies</a></li>
                                    <li><a href="coop.aspx"> COOP Training</a></li>

                                </ul>
                            </li>



                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Media files <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="Newsviewer.aspx">News</a></li>
                                    <li><a href="Gallery.aspx">Photos</a></li>
                                    <li><a href="Library.aspx">Library  </a></li>

                                </ul>
                            </li>

                            <li><a href="ContactUs.aspx">Contact Us <span class="sr-only">(current)</span></a></li>

                        </ul>
                        <!--END NAVBAR-->



                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>


    </header>

我在iphone中也面临同样的问题..