响应式设计菜单只发行iPhone

时间:2014-07-07 07:08:22

标签: jquery css iphone responsive-design twitter-bootstrap-3

我遇到了iPhone上的Bootstrap(v3.0.1)菜单下拉列表的问题。我有2个菜单。左键工作正常,但右键菜单不起作用。 当我在桌面上调整浏览器大小时,一切正常。但是,当我从移动浏览器尝试它时(我在iPhone上使用Chrome浏览器),我没有看到正确的菜单:

您可以在此处查看实时网页:website

有谁可以指出我做错了什么?

编辑代码:

 <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-user-nav-div">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

菜单侧边栏

<div class="sidebar">
                      <div class="navbar-collapse  navbar-user-nav-div in" style="height: auto;">

<ul id="menu-slider" class="navbar-sidebar-nav ">
        <li id="menu-item-0" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-0 dropdown">
            <a href="#" title="Gebelik Öncesi" data-toggle="dropdown" class="dropdown-toggle" id="7" onclick="return clickBaseLink();">
                <i>
                    <img src="http://lab.basarbilisim.com/imom/Media/Gebelik Öncesi.png" style="width: 82px;height: 63px;"></i>
                <span>Gebelik Öncesi</span>
            </a>
            <ul role="menu" class=" dropdown-menu" style="right: -142px;">
                    <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100">
                        <a title="Gebeliğe Hazırlık" href="/Home/Menu/8">
                            <span>Gebeliğe Hazırlık</span>
                        </a>
                    </li>
                    <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100">
                        <a title="Yardımla Üreme Teknikleri" href="/Home/Menu/9">
                            <span>Yardımla Üreme Teknikleri</span>
                        </a>
                    </li>
            </ul>
        </li>
        <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1 dropdown">
            <a href="#" title="Gebelik Dönemi" data-toggle="dropdown" class="dropdown-toggle" id="12" onclick="return clickBaseLink();">
                <i>
                    <img src="/Media/Gebelik Dönemi.png" style="width: 82px;height: 63px;"></i>
                <span>Gebelik Dönemi</span>
            </a>
            <ul role="menu" class=" dropdown-menu" style="right: -208px;">
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Hafta Hafta Gebelik" href="/Home/Menu/13">
                            <span>Hafta Hafta Gebelik</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Beslenme" href="/Home/Menu/14">
                            <span>Gebelikte Beslenme</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Egzersiz" href="/Home/Menu/15">
                            <span>Gebelikte Egzersiz</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Çoğul Gebelik" href="/Home/Menu/16">
                            <span>Çoğul Gebelik</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Psikoloji" href="/Home/Menu/17">
                            <span>Gebelikte Psikoloji</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Cinsellik" href="/Home/Menu/18">
                            <span>Gebelikte Cinsellik</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Bakım" href="/Home/Menu/19">
                            <span>Gebelikte Bakım</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte İlaç Kullanımı" href="/Home/Menu/20">
                            <span>Gebelikte İlaç Kullanımı</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Tanısal Testler ve Ultrason" href="/Home/Menu/21">
                            <span>Tanısal Testler ve Ultrason</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Aşılar" href="/Home/Menu/22">
                            <span>Gebelikte Aşılar</span>
                        </a>
                    </li>
                    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                        <a title="Gebelikte Yaşanabilecek Kritik Durumlar" href="/Home/Menu/24">
                            <span>Gebelikte Yaşanabilecek Kritik Durumlar</span>
                        </a>
                    </li>
            </ul>
        </li>
        <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2 dropdown">
            <a href="#" title="Doğum ve Sonrası" data-toggle="dropdown" class="dropdown-toggle" id="25" onclick="return clickBaseLink();">
                <i>
                    <img src="/Media/Doğum ve Sonrası.png" style="width: 82px;height: 63px;"></i>
                <span>Doğum ve Sonrası</span>
            </a>
            <ul role="menu" class=" dropdown-menu" style="right: -125px;">
                    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
                        <a title="Doğuma Hazırlık" href="/Home/Menu/26">
                            <span>Doğuma Hazırlık</span>
                        </a>
                    </li>
                    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
                        <a title="Doğum Belirtileri" href="/Home/Menu/27">
                            <span>Doğum Belirtileri</span>
                        </a>
                    </li>
                    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
                        <a title="Doğum Yöntemleri" href="/Home/Menu/28">
                            <span>Doğum Yöntemleri</span>
                        </a>
                    </li>
                    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
                        <a title="Emzirme" href="/Home/Menu/29">
                            <span>Emzirme</span>
                        </a>
                    </li>
                    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
                        <a title="Bebeğin Gelişimi" href="/Home/Menu/30">
                            <span>Bebeğin Gelişimi</span>
                        </a>
                    </li>
            </ul>
        </li>

    <li id="menu-item-000" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-000 dropdown">
        <a title="Albüm" href="/Home/MyAlbums" data-toggle="dropdown" class="dropdown-toggle">
            <i>
                <img src="/wp-content/uploads/2014/01/album.png"></i>
            <span>Albüm</span>
        </a>
        <ul role="menu" class=" dropdown-menu" style="right: -125px;">
            <li id="menu-item-439" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-439">
                <a title="Yeni Ekle" href="/Home/AlbumAdd">
                    <span>Yeni Ekle</span>
                </a>
            </li>
            <li id="menu-item-449" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-449">
                <a title="MyAlbums" href="/Home/MyAlbums">
                    <span>Albüm Listesi</span>
                </a>
            </li>

        </ul>
    </li>
</ul>
<script>
    function clickBaseLink() {
        e.preventDefault();
        return false;
    }
</script>

                      </div>                    
                <div class="clearfix"></div>
                </div>

1 个答案:

答案 0 :(得分:0)

它在我的Windows手机中运行良好,应该是跨浏览器问题! Check this out