#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/navbar5. Да, я был немного неясен. То, что у меня есть, — это сценарий, созданный на основе шаблона начальной загрузки. Таким образом, bootstrap.min.css явно задает запросы к носителям. Я только что понял, как просто изменить точки останова. Но да, как только он обновится, он вернется.