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

迭戈·佩雷斯

我正在使用 bootstrap 4,但有些东西我无法实现。

我在顶部有一个简单的导航栏菜单,左侧有一个徽标,右侧有一个用于选择语言的下拉菜单。在最常见的行为(台式机/笔记本电脑使用)中,它看起来不错(图 1),徽标右侧的菜单链接和屏幕右侧的语言选择器,但是当您调整窗口大小(以强制移动设备外观)和菜单折叠时,菜单框会粘住到导航栏的中间(图 2),但我想要实现的是,当折叠菜单框切换到屏幕的最右侧并立即位于其左侧时,语言选择器下拉菜单。

图1

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

有什么帮助吗?

谢谢。

齐姆

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

仅 CSS 动画会干扰移动设备上的 Bootstrap4 的导航栏切换器

具有独立导航栏链接的Bootstrap 4导航栏切换器

Bootstrap 4 在移动屏幕尺寸上单击导航菜单切换器将内容向下推

Bootstrap 4 导航,左侧切换,右侧按钮从移动折叠中排除?

如何在悬停时更改bootstrap 4导航栏切换器的颜色?

Bootstrap 4导航栏切换器未显示

导航栏切换器不适用于 Bootstrap 4

Bootstrap 4 轮播隐藏导航栏切换器

单击切换器后,Bootstrap 4导航不扩展

按下切换器时,Bootstrap 5 折叠导航栏不会显示

Bootstrap 4-使用切换按钮将链接移至导航栏的右侧

Bootstrap 4导航栏即使在切换时也保持右侧

Bootstrap 导航栏切换器

Bootstrap 4可切换导航栏

Bootstrap 4:在移动设备的cols之间切换

使用 Bootstrap 4 在大屏幕上的导航药丸和小屏幕上的导航栏导航之间切换

bootstrap 4导航栏仅在移动设备上粘

Bootstrap 4搜索导航栏未显示在移动设备上

Bootstrap 4导航栏始终在移动设备上可见

Bootstrap 4将两个导航栏折叠为一个切换按钮

导航栏折叠切换不会关闭(从 bootstrap v4 beta 切换到 v4 alpha 6 后)

(asp.net)Bootstrap 4 Navbar切换器不起作用

Bootstrap 折叠切换器不加载

Bootstrap - 在移动导航上设置切换按钮的样式?

Bootstrap导航栏切换器图标(汉堡)大小

Bootstrap 4.1.1 导航栏切换器不起作用

导航栏切换器在 Bootstrap 5 中不起作用

导航栏切换器在 Bootstrap 5 中不起作用

Bootstrap 4 导航栏切换按钮在位于特定站点时不起作用