Bootstrap 4 引导4在移动设备上最右侧设置折叠切换器导航栏
我正在使用Bootstrap4,但有些东西我无法实现 我在顶部有一个简单的导航栏菜单,左侧有一个徽标,右侧有一个选择语言的下拉菜单。在最常见的行为(台式机/笔记本电脑使用)中,它看起来正常(图1),菜单链接位于徽标右侧,语言选择器位于屏幕右侧,但当您调整窗口大小(强制移动外观)和菜单折叠时,菜单框会粘在导航栏的中间(图2)但我想实现的是,当折叠的菜单框切换到屏幕的最右侧,并立即切换到左侧时,语言选择器下拉列表 我的代码:Bootstrap 4 引导4在移动设备上最右侧设置折叠切换器导航栏,bootstrap-4,navbar,collapse,Bootstrap 4,Navbar,Collapse,我正在使用Bootstrap4,但有些东西我无法实现 我在顶部有一个简单的导航栏菜单,左侧有一个徽标,右侧有一个选择语言的下拉菜单。在最常见的行为(台式机/笔记本电脑使用)中,它看起来正常(图1),菜单链接位于徽标右侧,语言选择器位于屏幕右侧,但当您调整窗口大小(强制移动外观)和菜单折叠时,菜单框会粘在导航栏的中间(图2)但我想实现的是,当折叠的菜单框切换到屏幕的最右侧,并立即切换到左侧时,语言选择器下拉列表 我的代码: <nav class="navbar navbar-expand
<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>
-
-
-
{{cirsaApp.{U国家[i]}
有什么帮助吗
谢谢。使用flexbox ordering(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>
-
-
-
{{cirsaApp.{U国家[i]}
非常感谢@Zim,您的回复非常有用,而且确实有效:)