Панель навигации не складывается должным образом - PullRequest
Новая
       12

Панель навигации не складывается должным образом

0 голосов
/ 21 апреля 2020

На экране сверхмалого размера я хочу, чтобы марки navbar и navbar-nav располагались вертикально друг над другом. 

<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

Но по какой-то причине это выглядит так

enter image description here

Как мне использовать navbar-nav под брендом navbar на очень маленьком экране?

Ответы [ 3 ]

2 голосов
/ 21 апреля 2020

Хотите ли вы, чтобы элементы навигации располагались вертикально? Я думаю, что вы ищете это ... 

<nav class="navbar navbar-dark navbar-expand bg-primary fixed-top">
    <div class="container flex-column flex-sm-row">
        <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
        <ul class="navbar-nav mr-sm-auto mr-0">
            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

https://codeply.com/p/UNjoLoEnSn

2 голосов
/ 21 апреля 2020

Использование .collapse класса и кнопки переключения.

ОБНОВЛЕНИЕ

Просто добавьте flex-column flex-lg-row классов в ваш тег nav. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light flex-column flex-lg-row">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
0 голосов
/ 21 апреля 2020

Вам придется изменить flex-flow вашего контейнера на узких окнах просмотра. Возможно, вы захотите проверить, существуют ли для этого BS4-классы.

Например: 

@media (max-width: 640px) {
  .navbar .container {
    flex-flow: column;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

Лучшее использование Bootstrap 4 класса: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
  <div class="container flex-column flex-sm-row">
    <a class="navbar-brand" href="#">Ristorante Con Fusion</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>
...