Html 如何正确对齐导航栏项目（ul）_Html_Twitter Bootstrap_Bootstrap 4_Responsive Design_Responsive

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

html twitter-bootstrap bootstrap-4 responsive-design

Html 如何正确对齐导航栏项目（ul）,html,twitter-bootstrap,bootstrap-4,responsive-design,responsive,Html,Twitter Bootstrap,Bootstrap 4,Responsive Design,Responsive,我需要一些关于引导导航栏对齐的帮助，如果可能的话，我只想用引导类来纠正这个问题我目前设计的navbar，在响应（lg扩展）中正常工作，当汉堡包出现时，我的对齐方式正常，图标和汉堡包在右侧，其余内容在下方但当我的导航栏全宽时，我需要图标和用户位于列表项上方（在右侧对齐）文件我刚刚用引导类实现了它测试时，您可以单击右上角的“全屏”链接文件就是这样： <!DOCTYPE html> <html lang="en"> <head&

我需要一些关于引导导航栏对齐的帮助，如果可能的话，我只想用引导类来纠正这个问题

我目前设计的navbar，在响应（lg扩展）中正常工作，当汉堡包出现时，我的对齐方式正常，图标和汉堡包在右侧，其余内容在下方

但当我的导航栏全宽时，我需要图标和用户位于列表项上方（在右侧对齐）


文件

我刚刚用引导类实现了它

测试时，您可以单击右上角的“全屏”链接


文件

就是这样：

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


文件

可以查看：

我的设计是全宽的，我希望是这样的：