Bootstrap 导航栏在首次加载时出现在 Safari 中的 2 行上答案

【问题标题】：Bootstrap navbar appearing on 2 lines in Safari on first loadBootstrap 导航栏在首次加载时出现在 Safari 中的 2 行上
【发布时间】：2019-02-27 19:21:41
【问题描述】：

这是我的导航栏代码：

<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 个导航栏元素以尝试纠正此问题。它已经完成了一些事情......在我添加它之前，当它只是 Bootstrap 原生样式时，在 Safari 和 iPhone 7、8、X 设备上，即使刷新也无济于事，导航栏会保持分成 2 行。

我正在使用 Bootstrap 3.3.4

【问题讨论】：

标签： html iphone twitter-bootstrap safari mobile-safari

【解决方案1】：

我通过这个我找到了这个解决方案，而不是内联你可以使用引导类 checkbox-inline 这将使中心 div 内联并提供导航栏 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>

【讨论】：

谢谢！所以要解决我的确切问题checkbox-inline 不需要，只需要pull-left 和pull-right。我还查看了源代码，以找出为什么无论出于何种原因，Bootstrap 3.3.4、navbar-left 和 navbar-right 都被限制为在平板电脑大小之前无法使用！这对我来说真的没有意义，但你有它。两个类都只添加一个float: left/right !important。我仍然无法弄清楚为什么当我进行原始设置时，刷新页面使其工作，如果您愿意对此发表评论，对我来说仍然很有趣！
我很乐意这样做，实际上我有 windows pc，如果可能的话我们可以共享屏幕并解决它:)
我没有这个能力，但我可以把旧页面放到沙盒网站上，你就能在屏幕上清楚地看到问题
当然，当你这样做的时候就给我ping一下！
嗯...这是分期。但不幸的是，刷新它并没有像之前那样修复它hidden-tundra-8656.herokuapp.com/place-order

【解决方案2】：

我遇到了同样的问题。我通过固定导航栏的高度来解决它。尝试给导航栏一个固定的高度：即

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

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

希望这对你有用

最好的问候

【讨论】：