@serhiops
Python/JavaScript/C++

Пишу верстку через bootstrap5, почему не отображается навбар на телефонной версии?

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">
    <title>Головна сторінка</title>
</head>

<body>
    <!--navbar-->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/"><button type="button"
                                class="btn btn-light">Головна</button></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/news/add_post/"><button type="button"
                                class="btn btn-light">Додати публікацію</button></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/news/contact/"><button type="button"
                                class="btn btn-light">Зворотній зв'язок</button></a>
                    </li>
                </ul>
                <span class="navbar-text">
                    <a href="/news/about_user/admin/"><button type="button"
                            class="btn btn-outline-primary">admin</button></a>
                    <a href="/news/logout/"><button type="button" class="btn btn-outline-primary">Вийти</button></a>
                </span>
            </div>
        </div>
    </nav>

    <!--end navbar-->




    <!--leftbar-->

    <div class="container-mt-3">
        <div class="row">

            <div class="col-md-2">
                <div class="hamburger-menu">
                    <input id="menu__toggle" type="checkbox" />
                    <label class="menu__btn" for="menu__toggle">
                        <span></span>
                    </label>
                    <br>
                    <ul class="menu__box">

                        <li><a href="/category/iskusstvo/" class="list-group-item list-group-item-action">Искусство
                                <span class="badge bg-primary rounded-pill">6</span></a></li>

                        <li><a href="/category/politika/" class="list-group-item list-group-item-action">Политика <span
                                    class="badge bg-primary rounded-pill">2</span></a></li>

                    </ul>
                </div>
                <form role="search" method="post" id="searchform" class="d-flex" style="margin-left: 17px;">
                    <input type="hidden" name="csrfmiddlewaretoken"
                        value="RPPdDbNrHMux8usGxaY87KRxhPB4SL9hZ4YxMynQ4u35qHx9XtFuPQkFxgqXUhxo">

                    <label for="id_text"></label>
                    <input type="search" name="text" class="form-control me-2" maxlength="32" required id="id_text">
                    <div class="invalid-feedback">

                    </div>

                    <button class="btn btn-outline-success" type="submit">Search</button>

                </form>
            </div>
            <br>
            <div class="col-md-9">

                <div class="card-mb-3" style="margin-bottom: 60px;">

                    <div class="card-header">
                        Категорія: <a href="/category/iskusstvo/">Искусство</a>
                        <!--/category/iskusstvo/ - используется обращение к таблице Category через внешний ключ поля в таблице News(category)-->
                    </div>
                    <div class="card-body">
                        <div class="media">

                            <img src="/media/photos/2022/02/18/12_7unzKb9.jpg" alt="Фото" width='350' height="215"
                                style="float:left;margin: 5px 17px 7px 0;">

                        </div>
                        <div class="media-body">

                            <h5 class="card-title">Сало</h5>
                            <p class="card-text">
                            <p>Сала мало</p>
                            </p>

                            <p style="float:left; width:50%"><a href="/news/Salo801/" class="btn btn-primary">Read
                                    more...</a></p>

                            <p style="text-align:right;"><b>Опублікував: </b><a
                                    href="/news/about_user/admin/">admin</a><br><b>2 hours, 23 minutes ago</b></p>
                        </div>
                    </div>
                </div>
                <div class="card-mb-3">

                    <div class="card-header">
                        Категорія: <a href="/category/politika/">Политика</a>
                        <!--/category/politika/ - используется обращение к таблице Category через внешний ключ поля в таблице News(category)-->
                    </div>
                    <div class="card-body">
                        <div class="media">

                            <img src="/media/photos/2022/02/18/12_rC9h6hd.jpg" alt="Фото" width='350' height="215"
                                style="float:left;margin: 5px 17px 7px 0;">
                        </div>
                        <div class="media-body">
                            <h5 class="card-title">Сергей привет</h5>
                            <p class="card-text">
                            <p>Сергей приветСергей привет<br>Сергей приветСергей привет<br>Сергей приветСергей
                                привет<br>Сергей приветСергей приветСергей приветСергей привет<br>Сергей приветСергей
                                привет<br>Сергей приветСергей привет</p>
                            </p>
                            <p style="float:left; width:50%"><a href="/news/Sergej_privet556/"
                                    class="btn btn-primary">Read more...</a></p>

                            <p style="text-align:right;"><b>Опублікував: </b><a
                                    href="/news/about_user/admin/">admin</a><br><b>3 hours, 47 minutes ago</b></p>
                        </div>
                    </div>
                </div>
                <div class="card-mb-3">
                    <div class="card-header">
                        Категорія: <a href="/category/politika/">Политика</a>
                        <!--/category/politika/ - используется обращение к таблице Category через внешний ключ поля в таблице News(category)-->
                    </div>
                    <div class="card-body">
                        <div class="media">
                            <img src="/media/photos/2022/02/18/him_LQyv0zx.png" alt="Фото" width='350' height="215"
                                style="float:left;margin: 5px 17px 7px 0;">
                        </div>
                        <div class="media-body">
                            <h5 class="card-title">Сергей привет</h5>
                            <p class="card-text">
                            <p>сыфсыысффысфысфсыфысыфс<br>ыфссыфысфсыфсыфысфысф<br>сыфсыфысфсыфсыфысфысфсыф<br>ысфсыфсыфсыфысфысфысфсыф<br>ыфссыфсыфсыфсыфсыфсыфсыф<br>сыфсыфсыфсыфысфсыфсыфсыф
                            </p>
                            </p>
                            <p style="float:left; width:50%"><a href="/news/Sergej_privet506/"
                                    class="btn btn-primary">Read more...</a></p>
                            <p style="text-align:right;"><b>Опублікував: </b><a
                                    href="/news/about_user/admin/">admin</a><br><b>3 hours, 53 minutes ago</b></p>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <ul class="pagination justify-content-center">


                <li class="page-item active" aria-current="page">
                    <a class="page-link" href="?page=1">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="?page=2">2</a>
                </li>



                <li class="page-item">
                    <a class="page-link" href="?page=2">Наступна</a>
                </li>

            </ul>
        </div>
    </div>
    </div>
    <!--end leftbar-->
    <!-- Footer -->
    <footer class="page-footer font-small blue">
        <div class="footer-copyright text-center py-3">Instagram:
            <a href="https://www.instagram.com/serhiops_/">serhiops_</a>
        </div>
    </footer>
    <!-- endFooter -->
    <script src="/static/bootstrap/js/bootstrap-grid.js"></script>
  • Вопрос задан
  • 307 просмотров
Решения вопроса 1
Rst0
@Rst0
.navbar-expand{-sm|-md|-lg|-xl}
у вас класс lg - large - для больших
нужен sm - small - для маленьких
Как это работает
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы