Bootstrap 4 установил коллапс тумблера навбар вправо наиболее на мобильном - PullRequest
Новая
       45

Bootstrap 4 установил коллапс тумблера навбар вправо наиболее на мобильном

0 голосов
/ 07 сентября 2018

Я работаю с начальной загрузкой 4, и я чего-то не могу достичь.

У меня есть простое меню навигационной панели вверху с логотипом слева и раскрывающимся списком для выбора языка направо.В наиболее распространенном поведении (использование настольного компьютера / ноутбука) выглядит нормально (рисунок 1), ссылки меню справа от логотипа и селектор языка в правой части экрана, но когда вы изменяете размер окна (чтобы вызвать появление на мобильных устройствах) и сворачиваете меню, окно меню залипаетдо середины панели навигации (рисунок 2), но я бы хотел, чтобы при свернутом окне меню он находился в крайнем правом углу экрана и сразу слева от него в раскрывающемся списке выбора языка.

Figure 1

Figure 2

Мой код: 

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="https://www.cirsa.com/" target="_blank">
    <img src="../../../assets/cirsa_logo.png" />
  </a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>

  <select class="selectpicker" data-width="auto" data-style="btn-primary" #langSelect (change)="cirsaApp.translate.use(langSelect.value)">
    <option *ngFor="let lang of cirsaApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === cirsaApp.translate.currentLang">{{cirsaApp._countries[i]}}</option>
  </select>

</nav>

Любая помощь?

Спасибо.

1 Ответ

0 голосов
/ 07 сентября 2018

Используйте классы упорядочения flexbox (order-*), чтобы выровнять элементы по мере необходимости ... 

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="https://www.cirsa.com/" target="_blank">
    <img src="http://placehold.it/80x30" />
  </a>
  <button class="navbar-toggler order-last order-md-0" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse order-last order-md-0" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
  <select class="selectpicker ml-auto" data-width="auto" data-style="btn-primary" #langSelect (change)="cirsaApp.translate.use(langSelect.value)">
    <option *ngFor="let lang of cirsaApp.translate.getLangs(); let i = index" [value]="lang" [selected]="lang === cirsaApp.translate.currentLang">{{cirsaApp._countries[i]}}</option>
  </select>
</nav>

https://www.codeply.com/go/acMidnkl1M

Начальная загрузка NavBar с выровненными по левому, среднему или правому краю элементами
...