Bootstrap导航栏在第一次加载时出现在Safari的2行中

Question

这是我的导航栏的代码：

<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条不同的行上，如下所示：

然后，当您刷新或重新加载它时，它看起来像是正常的：

我很难弄清楚如何使其始终显示为正常状态，并且对为什么辅助页面加载可以解决此问题感到更加困惑。

请注意，我向所有3个导航栏元素添加了display:inline-block，以尝试解决此问题。它完成了一些事情……在我添加它之前，当它只是Safaris和iPhone 7、8，X设备上的Bootstrap本机样式时，即使刷新也无济于事，并且导航栏将保持拆分为两行。 >

我正在使用Bootstrap 3.3.4

Answer 1

我经历了这个问题，我发现了这个解决方案，而不是直接给它内联，您可以使用引导程序类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>

Answer 2

我有同样的问题。我通过固定导航栏的高度来解决它。尝试将导航栏设置为固定高度：即

.container_navbar{ height: 60px; ... }

固定高度适用于所有设备。

希望这对您有用

最诚挚的问候