Mobile NavBar Bootstrap with left bar icon and right aligned icons

问题

I'm using Bootstrap 4. I'd like to create a android like navbar with bar icon item to be on the far left. exactly as per the image And other icons on the right side of the navbar.

I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.

mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.

What i have tried is below but the items break on different phone screen sizes.

<header class="expo-mobile-header">
  <nav class="navbar shadow-sm sticky-top navbar-light bg-light navbar-expand-sm">
    <button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0 mr-0 px-0 float-right" style="font-size: 1em;">
    <i class="fa fa-bars"></i></button> 
    <a target="_self" href="#" class="navbar-brand">NavBar</a> 
    <button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0 float-left" style="font-size: 1em;"><i class="fa fa-trash"></i></button> 
    <button type="button" aria-label="Toggle navigation" aria-controls="navbar-toggle-collapse" aria-expanded="false" class="navbar-toggler border-0" style="font-size: 1em;"><i class="fas fa-bookmark"></i> 
    </button>
 </nav> 
</header>

Here is my code:

回答1:

This will do:

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

<head>
    <meta charset="UTF-8"></meta>

    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>

    <meta http-equiv="X-UA-Compatible" content="ie=edge"></meta>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"></link>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"></link>

    <link rel="stylesheet" href="style.css"></link>

    <title>Title</title>
</head>

<body>
    <nav class="navbar navbar-light bg-primary">
        <div class="col-4">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="fas fa-bars text-white"></span>
                    </button>
        </div>
        <div class="col-4 text-white align-left">Title</div>
        <div class="col-1"> </div>
        <div class="col-1"><span class="fa fa-search text-white"></span></div>
        <div class="col-1"><span class="fa fa-heart  text-white"></span></div>
        <div class="col-1"><span class="fas fa-ellipsis-v  text-white"></span></div>



    </nav>

    <div class="pos-f-t  bg-primary">
        <div class="collapse" id="navbarToggleExternalContent">
            <div class="bg-lightp-4">
                <h4 class="text-white">Collapsed content</h4>

                <span class="text-muted">
                    Toggleable via the navbar brand.
                </span>
            </div>
        </div>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>

</html>

see:https://jsfiddle.net/sugandhnikhil/Leatv5b3/ Enjoy!!! Thanks

来源：https://stackoverflow.com/questions/61169561/mobile-navbar-bootstrap-with-left-bar-icon-and-right-aligned-icons

标签

css

twitter-bootstrap

bootstrap-4