引導3.2下拉菜單切換不能在iPhone上工作

Question

我有下面的菜單，我使用Bootstrap 3.2。菜單+切換按鈕適用於Android和iOS上的任何瀏覽器。

我可以點擊按鈕，然後菜單將顯示&顯示後立即隱藏。

我使用了很多解決方法&修復，在bootstrap.js中禁用touchstart或更改導航欄的z-index。 。 。但無論如何，這個問題無濟於事。

菜單似乎顯示後點擊切換按鈕，但我什麼都看不到。我必須再次觸摸切換按鈕，關閉菜單&再次觸摸以再次打開菜單。

你小子可以有一個檢查，如果你有iPhone在www.vietwash.vn

感謝您對我的問題的關注。

<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再次。

乾杯隊友！我希望它有幫助。