Django navbar не отображается сверху, вместо него показывается левый верхний блок

при просмотре моего приложения django на ноутбуке оно показывает меню, как и ожидалось, по ширине экрана, но при попытке запустить это меню на мобильном устройстве оно отображается как небольшое поле в левом верхнем углу экрана. Как это исправить? 

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
      </li>
    </ul>
  <div class="form-inline my-2 my-lg-0">
    {% if user.is_authenticated %}

так почему это происходит? как это исправить?

Спасибо.

Вы не упомянули bootstrap версию.

так почему же это происходит?

Внутри <nav> вы используете .collapse и navbar-expand-lg класс означает, что когда ширина браузера падает ниже 992 px, navbar переходит в свернутый режим. Вот почему он свернут в вашем мобильном устройстве.

как это исправить?

Если вам нужно мобильное меню при любой ширине, просто используйте класс navbar-expand вместо navbar-expand-lg. Просто используйте <nav class="navbar navbar-expand navbar-dark bg-dark">

Иначе вам придется переопределить значение по умолчанию css.

Наконец-то я нашел решение, но мне нужно объяснение, пожалуйста. После проб и ошибок я нашел проблему в первой строке

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Мне нужно убрать первый "navbar" и тогда все будет в порядке. Кто-нибудь может объяснить мне, почему так происходит?

Спасибо.

Вернуться на верх