Mobile NavBar Bootstrap со значком левой панели и выровненными по правому значку - PullRequest
Новая
       15

Mobile NavBar Bootstrap со значком левой панели и выровненными по правому значку

1 голос
/ 12 апреля 2020

Я использую Bootstrap 4. Я бы хотел создать android подобную навигационную панель с элементом в виде панели, которая будет находиться слева. точно так же, как на изображении. И другие значки на правой стороне панели навигации.

Я пытался применить ml-auto, mx-auto, mr-auto, pull-right и т. д. c. Ничто не делает то, что я хочу.

enter image description here

mx-auto был хорош для маленького экрана. Когда меню гамбургеров находится в центре меню, оно помещает бренд navbar в центр. Тем не менее, мне нужно что-то, что работает, когда есть обычное меню.

То, что я пробовал, приведено ниже, но элементы разбиваются на экранах разных размеров телефона. 

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

Вот мой код:

1 Ответ

1 голос
/ 12 апреля 2020

Это будет делать: 

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

см .: https://jsfiddle.net/sugandhnikhil/Leatv5b3/ Наслаждайтесь !!! Спасибо

...