Bootstrap 4 在移动设备上最右侧设置折叠切换器导航栏

Question

我正在使用 bootstrap 4，但有些事情我无法实现。

我在顶部有一个简单的导航栏菜单，左侧有徽标，右侧有 select 语言下拉菜单。在最常见的行为（台式机/笔记本电脑使用）中，它看起来不错（图 1），菜单链接位于徽标和语言右侧 select 或位于屏幕右侧，但是当您调整大小时 window（强制移动出现）和菜单折叠菜单框粘在导航栏的中间（图 2），但我想要实现的是，当折叠菜单框切换到屏幕的最右侧并立即在其左侧时，语言 select或下拉菜单。

我的代码：

<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>

有什么帮助吗？

谢谢。

Answer 1

使用 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

Bootstrap NavBar with left, center or right aligned items

Bootstrap 4 在移动设备上最右侧设置折叠切换器导航栏

Bootstrap 4 set collapse toggler navbar right most on mobile

collapse

navbar

bootstrap-4