我正在使用 bootstrap 4,但有些东西我无法实现。
我在顶部有一个简单的导航栏菜单,左侧有一个徽标,右侧有一个用于选择语言的下拉菜单。在最常见的行为(台式机/笔记本电脑使用)中,它看起来不错(图 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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句