Question

我是初学者，我正试图在bootstrap 4上创建一个导航条，以便在移动设备上更改它

在全宽显示屏上，我想要

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

在平板电脑显示屏上，我想要

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

我已经成功实现了我想要的大部分功能，除了点击汉堡菜单时，个人资料图片菜单被按下，这不是我想要的。

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

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

我试过移动代码＆＃34; navbar-collapse collapse＆＃34;在配置文件图片之后，这适用于平板电脑显示时，但在全宽显示中产生不良结果。即它不再是右对齐的。

我还没能在网上找到任何具体的例子。我找到的最近的https://bootsnipp.com/snippets/gmQR0。这种差异是因为我认为我不需要两个可折叠菜单，只需要1个可折叠+ 1个固定下拉菜单。

Answer 1

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

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

将float-left类添加到按钮以进行对齐。

修改

首先设计小屏幕的导航栏，然后为dropdown-link添加媒体查询以向右浮动。

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

带有可折叠菜单和固定下拉菜单的Bootstrap 4 Navbar

1 个答案: