我如何正确对齐我的导航栏项目（ul）

Question

I need some help with the alignment in the bootstrap navbar, I want to rectify this with only bootstrap classes if its possible.我需要一些有关引导导航栏中的 alignment 的帮助，如果可能的话，我想只用引导类来纠正这个问题。

My current design of navbar, works properly in responsive(lg-expand) when the hamburger appears my alignment is ok, the icons and hamburger at right, and the rest of content downside,我当前的导航栏设计，当汉堡出现时，我的 alignment 正常，图标和汉堡在右侧，rest 的内容不足，

But when my navbar is in full width, I need that icons and user to be above the list items ( aligned in right side)但是当我的导航栏全宽时，我需要该图标和用户位于列表项上方（在右侧对齐）

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min:css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" /> <script src="https.//code.jquery.com/jquery-3.5.1.min:js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min:js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex"> <a class="navbar-brand" href="#"><img src="https.//soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a> <div class="float-right"> <i class="mdi mdi-account-circle info pr-2 text-primary font-size-19"></i><a href="#" class="text-primary"><span class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a><a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button></div> <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav> </div> </body> </html>

Answer 1

This is it:就是这个：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min.css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous"
    />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">
        <div class="col-8">

            <a class="navbar-brand " href="#"><img src="https://soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a>


        </div>
        <div class="col-4">
            <div class="row" style="margin-left: 25%;">
                <i class="mdi mdi-account-circle info pr-2 text-primary font-size-19 "></i><a href="#" class="text-primary"><span
                        class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a>
                <a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="row">
                <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                        <a class="nav-item nav-link disabled" href="#">Disabled</a>
                    </div>
                </div>
            </div>

        </div>
    </nav>

</body>

</html>

can check at: https://jsfiddle.net/y19drx5j/1/可以查看： https://jsfiddle.net/y19drx5j/1/

Answer 2

I just implemented it with bootstrap classes.我只是用引导类实现了它。

While testing, you can click on the "full screen" link in the upper right corner.测试时，您可以点击右上角的“全屏”链接。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min:css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.9.55/css/materialdesignicons.min:css" integrity="sha512-vIgFb4o1CL8iMGoIF7cYiEVFrel13k/BkTGvs0hGfVnlbV6XjAA0M0oEHdWqGdAVRTDID3vIZPOHmKdrMAUChA==" crossorigin="anonymous" /> <script src="https.//code.jquery.com/jquery-3.5.1.min:js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min:js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex flex-wrap"> <a class="navbar-brand order-lg-2" href="#"><img src="https.//soporte.isyc.com/static/202004211417/theme/images/branding/portal_logo_core.png" /></a> <div class="d-flex align-items-center ml-lg-auto"> <i class="mdi mdi-account-circle info pr-2 text-primary font-size-19"></i><a href="#" class="text-primary"><span class="pr-3 border-right border-primary font-size-14">jardeleanu</span></a><a href="/logout" class="pt-1"><i class="pl-3 pr-3 mdi mdi-power text-primary font-size-22"></i></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button></div> <div class="w-100 d-none d-lg-block"></div> <div class="collapse navbar-collapse justify-content-end order-lg-3" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> <a class="nav-item nav-link" href="#">Pricing</a> <a class="nav-item nav-link disabled" href="#">Disabled</a> </div> </div> </nav> </div> </body> </html>

What has changed发生了什么变化

<div class="float-right"> element class changed to "d-flex align-items-center ml-lg-auto" <div class="float-right">元素 class 更改为"d-flex align-items-center ml-lg-auto"
Element <div class="w-100 d-none d-lg-block"></div> added.添加了元素<div class="w-100 d-none d-lg-block"></div> 。
<nav class="navbar navbar-expand-lg navbar-light bg-light d-flex"> element class list added to flex-wrap . <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex">元素 class 列表添加到flex-wrap 。
<a class="navbar-brand" href="#"> class added order-lg-2 . <a class="navbar-brand" href="#"> class 添加了order-lg-2 。
<div class="collapse navbar-collapse justify-content-end"... element class list add order-lg-3 . <div class="collapse navbar-collapse justify-content-end"...元素 class 列表添加order-lg-3 。

我如何正确对齐我的导航栏项目（ul）

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-02-05 16:01:32

解决方案2
0 2021-02-05 12:35:36

我如何正确对齐我的导航栏项目（ul）

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-02-05 16:01:32

解决方案2 0 2021-02-05 12:35:36

解决方案1
1 已采纳 2021-02-05 16:01:32

解决方案2
0 2021-02-05 12:35:36