сделать видимым адаптивное меню на всех экранах?

#php #html #css #bootstrap-4 #twitter-bootstrap-3

Вопрос:

Я использую навигационное меню начальной загрузки. Что мне интересно, так это вместо того, чтобы показывать две кнопки на большом экране, а когда он переходит на маленький экран, на котором отображаются кнопки навигации, они превращаются в меню гамбургера. есть ли способ сделать кнопки видимыми как на маленьких, так и на больших экранах? Я попытался отредактировать почти все файлы начальной загрузки.css в класс .d-block и искал любой .dblock-lg.

 <div class="container">
        <a class="navbar-brand" href="<?= url() ?>">
            <?php if(settings()->logo != ''): ?>
                <img src="<?= UPLOADS_FULL_URL . 'logo/' . settings()->logo ?>" class="img-fluid navbar-logo" alt="<?= language()->global->accessibility->logo_alt ?>" />
            <?php else: ?>
                <?= settings()->title ?>
            <?php endif ?>
        </a>

        <button class="btn navbar-custom-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#main_navbar" aria-controls="main_navbar" aria-expanded="false" aria-label="<?= language()->global->accessibility->toggle_navigation ?>">
            <i class="fa fa-fw fa-bars"></i>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="main_navbar">
            <ul class="navbar-nav">

                <?php foreach($data->pages as $data): ?>
                <li class="nav-item"><a class="nav-link" href="<?= $data->url ?>" target="<?= $data->target ?>"><?= $data->title ?></a></li>
                <?php endforeach ?>

                <?php if(settings()->payment->is_enabled): ?>
                    <?php if(AltumPlugin::is_active('affiliate') amp;amp; settings()->affiliate->is_enabled): ?>
                        <li class="nav-item"><a class="nav-link" href="<?= url('affiliate') ?>"> <?= language()->affiliate->menu ?></a></li>
                    <?php endif ?>
                <?php endif ?>

                <?php if(AltumMiddlewaresAuthentication::check()): ?>

                    <li class="nav-item"><a class="nav-link" href="<?= url('dashboard') ?>"> <?= language()->dashboard->menu ?></a></li>

                    <li class="dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
                            <img src="<?= get_gravatar($this->user->email) ?>" class="navbar-avatar mr-1" />
                            <?= $this->user->name ?> <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <?php if(AltumMiddlewaresAuthentication::is_admin()): ?>
                                <a class="dropdown-item" href="<?= url('admin') ?>"><i class="fa fa-fw fa-sm fa-user-shield mr-1"></i> <?= language()->global->menu->admin ?></a>
                            <?php endif ?>

                            <?php if(settings()->links->domains_is_enabled): ?>
                                <a class="dropdown-item" href="<?= url('domains') ?>"><i class="fa fa-fw fa-sm fa-globe mr-1"></i> <?= language()->domains->menu ?></a>
                            <?php endif ?>
                            <a class="dropdown-item" href="<?= url('links') ?>"><i class="fa fa-fw fa-sm fa-link mr-1"></i> <?= language()->links->menu ?></a>

                            <a class="dropdown-item" href="<?= url('projects') ?>"><i class="fa fa-fw fa-sm fa-project-diagram mr-1"></i> <?= language()->projects->menu ?></a>

                            <a class="dropdown-item" href="<?= url('pixels') ?>"><i class="fa fa-fw fa-sm fa-adjust mr-1"></i> <?= language()->pixels->menu ?></a>

                            <div class="dropdown-divider"></div>

                            <a class="dropdown-item" href="<?= url('account') ?>"><i class="fa fa-fw fa-sm fa-wrench mr-1"></i> <?= language()->account->menu ?></a>

                            <a class="dropdown-item" href="<?= url('account-plan') ?>"><i class="fa fa-fw fa-sm fa-box-open mr-1"></i> <?= language()->account_plan->menu ?></a>

                            <?php if(settings()->payment->is_enabled): ?>
                            <a class="dropdown-item" href="<?= url('account-payments') ?>"><i class="fa fa-fw fa-sm fa-dollar-sign mr-1"></i> <?= language()->account_payments->menu ?></a>

                                <?php if(AltumPlugin::is_active('affiliate') amp;amp; settings()->affiliate->is_enabled): ?>
                                    <a class="dropdown-item" href="<?= url('referrals') ?>"><i class="fa fa-fw fa-sm fa-wallet mr-1"></i> <?= language()->referrals->menu ?></a>
                                <?php endif ?>
                            <?php endif ?>

                            <a class="dropdown-item" href="<?= url('account-api') ?>"><i class="fa fa-fw fa-sm fa-code mr-1"></i> <?= language()->account_api->menu ?></a>

                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="<?= url('logout') ?>"><i class="fa fa-fw fa-sm fa-sign-out-alt mr-1"></i> <?= language()->global->menu->logout ?></a>
                        </div>
                    </li>

                <?php else: ?>

                    <li class="nav-item d-flex align-items-center">
                        <a class="btn btn-sm btn-outline-primary" href="<?= url('login') ?>"><i class="fa fa-fw fa-sm fa-sign-in-alt"></i> <?= language()->login->menu ?></a>
                    </li>

                    <?php if(settings()->register_is_enabled): ?>
                    <li class="nav-item d-flex align-items-center">
                        <a class="btn btn-sm btn-primary" href="<?= url('register') ?>"><i class="fa fa-fw fa-sm fa-plus"></i> <?= language()->register->menu ?></a>
                    </li>
                    <?php endif ?>

                <?php endif ?>
 

Вот два разных меню именно для того, о чем я говорю.
два разных варианта загрузки

Комментарии:

1. конечно, вы можете сделать это многими способами, от удаления классов navbar-collapse и navbar-custom-toggler и реализации ваших навигаторов с помощью js или собственных медиа-запросов или использования комбинации классов отображения getbootstrap.com/docs/4.0/utilities/display для отображения различных меню и т. Д

2. Я уже пытался просто «.d-заблокировать» без изменений.

3. Решение, казалось, состояло в том, чтобы проверить элемент> найти точку останова, которая составляла 992px lg, а затем перейти к bootstrap.min.css и выполнить поиск всех точек останова, установленных на 992, и установить точку останова меньше.

4. вместо того, чтобы изменять файл поставщика, вам действительно следует использовать scss или переопределить его в файле styles.css, иначе он сломается при изменении версии boostrap или переходе на использование webpack и т. Д. Все еще немного неясно, но у вас, похоже, нет того, для .navbar-expand-[sm-md-lg-xl] чего он используется, когда навигатор сворачивается (или нет), он упоминается в документах буквально в первой строке getbootstrap.com/docs/4.0/components/navbar

5. Да, я был немного неясен. То, что у меня есть, — это сценарий, созданный на основе шаблона начальной загрузки. Таким образом, bootstrap.min.css явно задает запросы к носителям. Я только что понял, как просто изменить точки останова. Но да, как только он обновится, он вернется.