【发布时间】：2014-08-27 14:15:03
【问题描述】：
我遇到了 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>
【问题讨论】：
-
在什么不起作用的问题中添加必要的 css 和 jquery 代码...
-
感谢您的回复。你能在 iPhone 上查看那个网站链接吗？除了 iPhone，它在任何地方都能完美运行。按钮有 data-target=".navbar-user-nav-div"
-
对不起，在您发布相关代码之前不能...
标签： jquery css iphone responsive-design twitter-bootstrap-3