Bootstrap navbar, появляющийся на 2 строчках в Safari при первой загрузке - PullRequest
Новая
       11

Bootstrap navbar, появляющийся на 2 строчках в Safari при первой загрузке

0 голосов
/ 27 февраля 2019

Вот код, который у меня есть для моей панели навигации: 

<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>

В Safari на устройствах iPhone 7, 8, X, когда вы ПЕРВАЯ загружаете страницу, панель навигации отображается в 2 разных строках, например:

Site view in Safari browser

Затем, когда вы обновляете или перезагружаете его, он выглядит нормально, как:

Site view in Safari browser

Мне очень трудно понять, как сделать так, чтобы это всегда выглядело нормально, и еще больше удивляюсь, почему загрузка вторичной страницы исправляет проблему.

Обратите внимание, ядобавил display:inline-block ко всем 3 элементам навигационной панели, чтобы попытаться исправить эту проблему.Он сделал что-то ... ДО того, как я добавил его, когда он был просто родным стилем Bootstrap, на устройствах Safari и iPhone 7, 8, X, даже обновление не помогло бы, и панель навигации оставалась бы разделенной на 2 строки.

Я использую Bootstrap 3.3.4

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

У меня была такая же проблема.Я решил это, установив высоту панели навигации.Попробуйте задать для панели навигации фиксированную высоту: т.е. 

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

Фиксированная высота работает на всех устройствах.

Надеюсь, что это работает для вас

С уважением

0 голосов
/ 04 марта 2019

Пройдя через это, я нашел это решение, вместо того, чтобы дать ему встроенный метод, вы можете использовать класс начальной загрузки 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>
...