stackoom
  简体   繁体   中英

How i can align correctly my navbar items (ul)

 原文  2021-02-04 10:14:31  0   2    html/ twitter-bootstrap/ bootstrap-4/ responsive-design/ responsive

Question

I need some help with the alignment in the bootstrap navbar, I want to rectify this with only bootstrap classes if its possible.

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,

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>

2 answers

solution1
 1 ACCPTED  2021-02-05 16:01:32

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/

solution2
 0  2021-02-05 12:35:36

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"
  • Element <div class="w-100 d-none d-lg-block"></div> added.
  • <nav class="navbar navbar-expand-lg navbar-light bg-light d-flex"> element class list added to flex-wrap .
  • <a class="navbar-brand" href="#"> class added order-lg-2 .
  • <div class="collapse navbar-collapse justify-content-end"... element class list add order-lg-3 .

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I align the items in my navbar to the center? How can I align my navbar menu items to the right? How can I align my navbar buttons? How can I align my NavBar items to the right with Boostrap v5.2? How can I align my navbar items to the left and right side of the centered image? How can I align to the end of a bootstrap navbar one of my link How can I align div bellow off my navbar? How can I align my navbar to the label tag how can i add font icon to navbar (ul, li navbar) I want to align the UL elements of the navbar to the right
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM