Мой список загрузок Navbar является вертикальным, а не горизонтальным - PullRequest
Новая
       6

Мой список загрузок Navbar является вертикальным, а не горизонтальным

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

Я пытался решить это часами.Я искал, но ни одно из решений, которые я нашел в Интернете, не помогло.Поэтому я хочу знать, почему мой список навигационных панелей не идет по вертикали, а также почему «выход из системы» и «Мои сообщения» не раскрываются при выборе «Автор», как следует.Вот HTML: 

<nav class="navbar navbar-light bg-faded">
  <div class="container">
    <a href="/" class="navbar-brand">
      Bella<span class="light">blog</span>
    </a>
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
      &#9776;
    </button>
    <ul class="nav navbar-nav pull-sm-right hidden-xs-down">
      <li class="nav-item">
        <%= link_to 'Blog', root_path, class: "nav-link #{yield(:blog_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'About', about_path, class: "nav-link #{yield(:about_active)}" %>
      </li>
      <li class="nav-item">
        <%= link_to 'Contact', contact_path, class: "nav-link #{yield(:contact_active)}" %>
      </li>
      <% if author_signed_in? %>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Author
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li>
            <%= link_to 'My Posts', authors_posts_path, class: "dropdown-item #{yield(:author)}" %>
          </li>
        <li>
          <%= link_to 'Logout', destroy_author_session_path, method: :delete, class: "dropdown-item" %>
        </div>
      </li>
      <% end %>
    </ul>
  </div>
</nav>

Вот scss: 

.navbar {
  border-radius: 0;
  margin-bottom: 20px;
  background-color: gray;
  .navbar-brand {
    font-weight: bolder;
    color: $accent-color;
    .light {
      font-weight: 300;
      color: white;
    }
  }
  .navbar-expand-* {
    outline: none;
  }
  .nav-link {
    color: $light-primary-color !important;
    &.active {
      color: $text-primary-color !important;
    }
  }
}

.collapse-bg {
  padding: 0 !important;
  .card {
    margin-bottom: 0;
    border-radius: 0;
    border: none;
  }
}


.collapse-bg .card .list-group-item {
  padding: 0;
  border-radius: 0 !important;
  border-color: black;
  a {
    background-color: #1a1a1a;
    color: #bdc3c7;
    width: 100%;
    height: 100%;
    padding: 10px;
    &:active {
      color: white;
      border-bottom: none;
    }
  }
}

Это не только мой код, который играет.Я также использовал эту навигационную панель из этого примера, учитывая https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp и все еще без выпадающего списка

1 Ответ

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

Полагаю, вам следует проверить загрузочный импорт CSS и JS в вашем HTML-файле

пожалуйста см. Bootstrap !

Выпадающие, всплывающие подсказки и всплывающие окна для отображения и позиционирования (требуется Popper.js)

Пожалуйста, убедитесь, что вы импортировали все (bootstrap.min.css, jquery-3.3.1.slim.min.js, popper.min.js, bootstrap.min.js) файл начальной загрузки правильно.

А для списка вертикальной навигационной панели попробуйте использовать bootstrap sidenav вместо navbar

sidenav пример

Надеюсь, это ответ, который вы ищете ..:)

...