带有可折叠菜单和固定下拉菜单的 Bootstrap 4 导航栏答案

【问题标题】：Bootstrap 4 Navbar with Collapsible Menu and Fixed Dropdown Menu带有可折叠菜单和固定下拉菜单的 Bootstrap 4 导航栏
【发布时间】：2017-12-19 08:25:12
【问题描述】：

我是初学者，我正在尝试在 bootstrap 4 上创建一个导航栏，以更改它在移动设备上的显示

在全角显示器上，我想要

徽标（左对齐）
链接（左对齐）
个人资料图片下拉菜单（右对齐）

在平板显示器上，我想要

徽标（居中）
链接（左对齐并折叠到汉堡菜单中）
个人资料图片下拉菜单（右对齐）- 基本不变

我已经设法实现了我想要的大部分功能，除了单击汉堡菜单时，头像菜单被按下，这不是我想要的。

https://www.bootply.com/6a0BWZivYL

我的问题是，如何将个人资料图片下拉菜单固定到右侧。

我尝试将navbar-collapse collapse 的代码移到个人资料图片之后，这适用于平板电脑显示，但在全角显示时会产生不良结果。即不再右对齐。

我无法在网上找到任何具体的例子。我找到的最接近的https://bootsnipp.com/snippets/gmQR0。这个区别是我认为我不需要两个可折叠菜单，只需 1 个可折叠 + 1 个固定下拉菜单。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

在给定的设计中，您将配置文件 UL 保留在按钮 div 导航列表下方。

请将其放在按钮之前，并将类从float-md-right 更改为float-right。

将float-left 类添加到按钮以使左对齐。

编辑

先为小屏设计导航栏，然后为下拉链接添加媒体查询以向右浮动。

<head>
<style>
       @media(min-width:769px){
            .drop-class{
                 position: absolute;
                 right: 20px;
            }
        }

</style>
</head>

<body>
    <div>
        <nav class="navbar navbar-expand-lg navbar-light">
            <button class="navbar-toggler" type="button" data-
              toggle="collapse" data-target="#navbarNavDropdown" aria-
              controls="navbarNavDropdown"
              aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand" href="#">Navbar</a>

            <div class="dropdown drop-class">
                <a class="dropdown-toggle" href="#" 
                 id="navbarDropdownMenuLink" data-toggle="dropdown" 
                aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" 
                 aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another 
                     action</a>
                    <a class="dropdown-item" href="#">Something else 
                     here</a>
                </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                        <span class="sr-only">(current)</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Features</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                </li>

            </ul>
        </div>
        </nav>

    </div>

【讨论】：

我已经尝试了您的建议，但未能达到预期的效果。事实上，这似乎与最初的尝试相去甚远。你能举个例子吗？