Boostrap 4 Scroll Spy активный класс не изменился - PullRequest
Новая
       2

Boostrap 4 Scroll Spy активный класс не изменился

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

Мой HTML: 

<body data-spy="scroll" data-target=".dmu-top-nav" data-offset="50">
  <header>
  <nav class="navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role="navigation">
  <div class="container-fluid">
  <div class="dmu-nav-wrapper">
  <div class="navbar-header">
    <a class="navbar-brand" href="#home">
    <img src="img/220px-Logo__lowres.png" width="30" height="30" alt="logo">
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#dmu-nav-menu" aria-controls="dmu-nav-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
  </div>

В приведенном выше HTML я даю логотип и значок для кнопки переключения.Я также даю класс расширения и фиксированный верхний класс, но он все еще не работал.Моя цель данных уже правильная, это .dmu-top-nav.

<div id="dmu-nav-menu" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#about">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#news">Upcoming</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#staff">Lecture</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#student">Alumni</a>
    </li>
  </ul>
....
</header>
....

Почему активный класс не хочет меняться?Во втором блоке кода есть разделы для href.

Ответы [ 2 ]

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

О, теперь я получаю ответ, активное изменение класса в «а», но я не знаю почему.Поэтому «а» добавляет и удаляет активный класс.

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

Привет?Вы должны добавить немного CSS в ваш файл таблицы стилей, вот код 

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

, вот HTML-код 

<div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2 text-muted" href="#">World</a>
      <a class="p-2 text-muted" href="#">U.S.</a>
      <a class="p-2 text-muted" href="#">Technology</a>
      <a class="p-2 text-muted" href="#">Design</a>
      <a class="p-2 text-muted" href="#">Culture</a>
      <a class="p-2 text-muted" href="#">Business</a>
      <a class="p-2 text-muted" href="#">Politics</a>
      <a class="p-2 text-muted" href="#">Opinion</a>
      <a class="p-2 text-muted" href="#">Science</a>
      <a class="p-2 text-muted" href="#">Health</a>
      <a class="p-2 text-muted" href="#">Style</a>
      <a class="p-2 text-muted" href="#">Travel</a>
    </nav>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...