Перестал работать Bootstrap 4 sticky-top для навигации - PullRequest
Новая
       11

Перестал работать Bootstrap 4 sticky-top для навигации

0 голосов
/ 13 октября 2018

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

Вот код для навигационной панели https://codeshare.io/GLJmWV

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

Я попытался:

  • позиция: прикрепленная
  • класс с позицией: фиксированная, ширина: 100%, вершина: 0
  • возврат к старому файлу, который работал должным образом
  • justify-right
  • text-right
  • и еще несколько других вещей, которые я не могу вспомнить на данный момент

Редактировать: Вот код для всегостраница https://codeshare.io/a30RoL и вот код css, который я написал также https://codeshare.io/2W87m8

1 Ответ

0 голосов
/ 13 октября 2018

Ваш код работает для меня, но лучше использовать фиксированный, а не липкий.См. this

Это означает, что проблема в другом месте, вы пытались скопировать загрузчик один: 

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">Fixed navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

Также есть некоторые проблемы с Chrome, если выиспользовать переполнение: скрыто, оно не будет работать.

...