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

JB_

我正在尝试使用左侧的切换按钮进行可折叠的引导程序 4 导航。这不是问题,但我也在尝试在导航右侧有一个操作按钮(或多个按钮)。

如何在右侧有从导航栏折叠菜单中排除的按钮/链接。此外,如何避免导航栏折叠菜单在展开时向下推这些项目?我可以浮动右键,但这也会导致问题。

参考图片:

在此处输入图片说明

当前实现的实时 Codeply 示例:https ://www.codeply.com/go/IDCOYUVXCH

齐姆

你将不得不像这样使用 flexbox 工具......

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

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-inverse bg-inverse">
    <div class="container d-flex flex-row flex-md-nowrap flex-wrap">
    <a href="#" class="hidden-lg-up my-2 mr-3" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false">
        <i class="fa fa-bars text-white"></i>
    </a>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="navbar-collapse collapse flex-md-unordered flex-last" id="navbarCollapse">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link <span class="sr-only">Home</span></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>
    <div class="d-flex ml-auto">
         <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
    <div class="hidden-md-up w-100"><!--hidden spacer to force wrap--></div>
    </div>
</nav>

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

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

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

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

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

Bootstrap4切换按钮

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

Bootstrap导航栏折叠切换按钮未单击

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

Bootstrap 4导航栏切换按钮无法正常工作

我的导航切换按钮无法在 Bootstrap 4 中工作

Bootstrap 4导航:防止URL切换和刷新

Bootstrap 4可切换导航栏

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

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

如何使用Bootstrap-4将可折叠按钮菜单显示在屏幕右侧而不是左侧

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

右对齐Bootstrap4切换按钮

Bootstrap 4-切换按钮不起作用

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

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

bootstrap 4导航栏的左侧和右侧都有填充

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

如何在 Bootstrap 4 中切换折叠图标的动画?

切换按钮折叠在Bootstrap导航栏中不起作用

切换按钮折叠在引导程序中的Bootstrap导航栏中不起作用

移动版本上的 Bootstrap4 导航栏折叠按钮没有响应

在特定宽度折叠/切换 Bootstrap 导航栏

Bootstrap折叠的导航栏切换不起作用

Bootstrap 导航栏在折叠时不会切换打开

Bootstrap 4 导航栏切换在 iPad 中不显示