这是我的导航栏代码:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-left previous_page" style="display:inline-block">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center" id="progress-bar" style="display:inline-block">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn navbar-right next_page disabled" style="margin-right:0px;display:inline-block">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
在iPhone 7,8,X设备上的Safari上,当您首次加载页面时,导航栏会出现在2条不同的行上,如下所示:
然后,当您刷新或重新加载它时,它看起来像这样正常:
我很难弄清楚如何让它始终显得正常,并且更加难以理解为什么辅助页面加载可以解决问题。
注意,我将display:inline-block
添加到所有3个navbar元素以尝试纠正此问题。它已经完成了......在我添加它之前,当它只是Bootstrap原生样式时,在Safari和iPhone 7,8,X设备上,甚至刷新都无济于事,导航栏将保持分为2行。
我正在使用Bootstrap 3.3.4
我经历了这个我发现这个解决方案,而不是给它内联你可以使用bootstrap类checkbox-inline
,这将使中心div内联并给navbar text-center
类。使用pull-left
和pull-right
而不是navbar-left和navbar-right。希望它能帮到你:)
<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
<span class="glyphicon glyphicon-menu-left"></span>
back
</button>
<div class="text-center checkbox-inline" id="progress-bar">
<div data-page="0" class="counter active"></div>
<div data-page="1" class="counter "></div>
<div data-page="2" class="counter "></div>
<div data-page="3" class="counter "></div>
<div data-page="4" class="counter "></div>
</div>
<button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
next
<span class="glyphicon glyphicon-menu-right"></span>
</button>
</div>
</nav>
我有同样的问题。我通过固定导航栏的高度解决了这个问题。尝试给导航栏一个固定的高度:即
.container_navbar{ height: 60px; ... }
固定高度适用于所有设备。
希望这对你有用
最好的祝福