загрузчик navbar: Toggler перемещает бренд navbar под ним при расширении - PullRequest
0 голосов
/ 03 июля 2019

Я использовал класс "order-md-last", чтобы держать бренд navbar вправо, когда пользователь находится на рабочем столе или в мобильном окне. Однако, когда есть средний видовой экран, бренд navbar падает под переключателем каждый раз, когда он переключается.

По какой-то причине торговая марка navbar не падает под переключателем, когда пользователь находится на небольшом устройстве просмотра.

Я пытался использовать mr-auto, ml-auto и order-n, но он либо не держится вправо в режиме рабочего стола, либо просто падает под переключателем.

https://jsfiddle.net/0uoL8x6e/1/

<nav class="navbar navbar-expand-lg navbar-light">


    <div class="navbar-header">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
                <span class="navbar-toggler-icon">
                </span>
    </button>
    </div>


    <ul class="navbar-brand order-md-last" style="margin-top: 5px;">

      <img src="logo.png" class="centered-navbar-image" width="75" />

    <h1 class="navbar-brand">brand 1</h1>
    <h1 class="navbar-brand">brand 2</h1>
    </ul>


    <div class="collapse navbar-collapse ml-auto" id="navbarMenu">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="index.html" class="nav-link">Home</a>
        </li>

        <li class="nav-item">
          <a href="about_us.html" class="nav-link">About Us</a>
        </li>

        <li class="nav-item">
          <a href="contact_us.html" class="nav-link">Contact Us</a>
        </li>

        <li class="nav-item">
          <a href="services.html" class="nav-link">Products</a>
        </li>
      </ul>

    </div>



  </nav>

Так выглядит панель навигации в окне просмотра md.

https://imgur.com/sPZQNGY

Вот так это выглядит при переключении.

https://imgur.com/ODUuf05

Так выглядит переключаемая навигационная панель в sm-viewport

https://imgur.com/Qqx52OM

Edit: 1029 ** Исправлено это с помощью «order-lg-last» вместо «order-md-last».

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...