Twitter bootstrap 3 Bootstrap 3导航条切换在iPhone上打开时跳跃,而在iPhone上根本不打开?

Twitter bootstrap 3 Bootstrap 3导航条切换在iPhone上打开时跳跃,而在iPhone上根本不打开?,twitter-bootstrap-3,nav-pills,Twitter Bootstrap 3,Nav Pills,我有一个Bootstrap 3导航药丸菜单,它在移动设备上折叠,但是当你点击导航栏切换菜单时,菜单打开,然后立即跳到大约40-50像素 它在iPhone上根本无法打开( 在这里: 我仔细检查了CSS,但我看不到,可能是树木换树木,为什么要这样做。希望有人能帮我指出明显的问题 多谢各位。 新泽西州 菜单 <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="col

我有一个Bootstrap 3导航药丸菜单,它在移动设备上折叠,但是当你点击导航栏切换菜单时,菜单打开,然后立即跳到大约40-50像素

它在iPhone上根本无法打开(

在这里:

我仔细检查了CSS,但我看不到,可能是树木换树木,为什么要这样做。希望有人能帮我指出明显的问题

多谢各位。 新泽西州

菜单

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rickwoodcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="rickwoodcollapse">
<ul class="nav nav-pills nav-justified">
<li role="presentation"><a href="index.php" id="home">Home</a></li>
<li role="presentation"><a href="hotel-rooms-portpatrick.php" id="rooms">Rooms</a></li>
<li role="presentation"><a href="dinner-breakfast-dining.php" id="dining">Dining</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="attractions">Attractions <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="beaches-coast-portpatrick.php">Beaches &amp; Coast</a></li>
<li><a href="public-gardens-scotland.php">Gardens</a></li>
<li><a href="mull-of-galloway.php">Mull of Galloway</a></li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="activities">Activities <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="walking-portpatrick-scotland.php">Walking</a>
<li><a href="walking-in-portpatrick.php">Walking in Portpatrick</a></li>
<li><a href="walking-dumfries-galloway.php">Further Afield</a></li>
<li><a href="Mull-of-Galloway-Trail.php">Mull of Galloway Trail</a></li>
<li><a href="golf-courses-wigtownshire.php">Golf Courses</a></li>
<li><a href="cycling-portpatrick-scotland.php">Cycling</a></li>
</ul>                    
</li>
<li role="presentation"><a href="portpatrick-scotland.php">Location</a></li>
<li role="presentation"><a href="news-events-portpatrick.php">News</a></li>
<li role="presentation"><a href="contact.php">Contact</a></li>
</ul>
</div>

切换导航
CSS。。。

我将努力学习如何使用jsfiddle或github或其他任何名称。谢谢。
NJ

style.css
文件(当前为第158行)中,有一行包含
行高

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  height: 60px;
  background-color: #14214D;
}

删除高度:60px;
,菜单就不会跳转了。我在iPhone模拟器上测试过,效果很好。我没有iPhone(喘息!),因此无法在实际设备上测试。

将代码包含在此处,您会得到一些帮助。我在该部分中没有看到“线高度”。我删除了“高度”虽然,正如建议的那样,但它并没有解决问题,现在,在IE中,桌面视图中活动按钮的插入符号位于按钮下方!菜单仍然在移动视图中跳转,在iPhone 5s上仍然没有打开。我尝试创建了一个引导示例,但当我测试它时,它立即与屏幕上显示的内容不同我的网站,尽管它是HTML和CSS的剪切和粘贴!?更改了navbar标题的高度。navbar标题{height:0;}这就解决了跳转问题。切换菜单将导航栏标题高度考虑在内,加载菜单后会跳转,因为。导航栏标题虽然在高度中指定,但在页面上不可见。现在的问题是,我的切换菜单以90%的宽度打开,然后向右跳转。Bootply示例,以及当我将字体大小设置为任何超过18px的东西,插入符号都会跳到按钮下面(在IE中大多数情况下)。这是可以防止的,还是仅仅因为菜单中缺少空间?