У меня есть следующая навигационная панель, которая очень хорошо работает с моим экраном (ширина 1300 пикселей и высота 700):
Когда область просмотра меньше, элементы в navbar go crazy:
Я обнаружил, что переключение между любыми типичными классами bootstrap просто вызывает больше проблем с выравниванием и размером.
Я пытался использовать этот медиа-запрос в моем CSS, но он ничего не делал:
@media only screen and (max-width: 700px) {
.navbar .app-badge {
display: block !important;
}
}
Я пробовал несколько способов настройте классы bootstrap или используйте медиазапрос. Ничего не работает Мне нужна помощь, чтобы выяснить, как заставить навигационную панель разваливаться на маленьких окнах просмотра.
Вот мои HTML:
<nav class="navbar navbar-expand-sm navbar-spur
{% if not current_user.admin %}navbar-spur-user {% else %} navbar-spur-admin {% endif %}">
<div class="border rounded border-1 border-white pt-1 pl-1 even-height ml-n1 app-badge">
<a class="navbar-nav mr-auto text-center p-1" href="https://www.spur.community/holiday-cheer-drive">
<div class="text-center ml-n1 mt-n1">
<div class="stacked">
<img src="/static/logos/logo-spur-main.png">
</div>
<div class="stacked">
<span class="text-spur-ribbon m-1"><small><b>SPUR</b></small></span>
</div>
</div>
</a>
</div>
<div class="border rounded border-1 border-white pt-1 pl-1 ml-3 even-height app-badge">
<a class="navbar-brand p-0" href="/" title="Home">
<div class="parallel">
<img src="/static/logos/logo-spur-white.png">
</div>
<div class="parallel">
<span class="text-spur-red">
<h1>
<em>
<b>SPUR</b>
</em>
</h1>
</span>
</div>
<div class="ml-1 parallel">
<div class="mt-n2 stacked">
<small><span class="text-spur-green"><em>Holiday</em></span></small>
</div>
<div class="mt-n3 stacked">
<small><span class="text-spur-green"><em>Cheer</em></span></small>
</div>
<div class="mt-n3 stacked">
<small><span class="text-spur-green"><em>Drive</em></span></small>
</div>
</div>
{% if current_user.admin %}
<div class="mt-2 parallel">
<span class="text-spur-ribbon mt-2 ml-2"><em>Admin</em></span>
</div>
{% endif %}
</a>
</div>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_main %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% if current_user.admin %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle {{ 'active' if active_page in admin_labels }}" data-toggle="dropdown"
href="" id="adminDropdown" aria-haspopup="true" aria-expanded="false">Admin</a>
<ul class="dropdown-menu" aria-labelledby="adminDropdown">
{% for url, route, label in nav_admin_dropdown_top %}
<li><a href="{{ url }}"" class=" dropdown-item">{{ label }}</a></li>
{% endfor %}
<div class="dropdown-divider"></div>
{% for url, route, label in nav_admin_dropdown_bottom %}
<li><a href="{{ url }}"" class=" dropdown-item">{{ label }}</a></li>
{% endfor %}
</ul>
</li>
</div>
{% endif %}
{% if current_user.is_authenticated and nav_logged_in %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_logged_in %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% endif %}
</ul>
<ul class="navbar-nav m1-auto">
{% if current_user.is_anonymous %}
<!-- e.g., if NOT current_user.is_authenticated -->
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_anon %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% elif current_user.is_authenticated %}
{% if nav_right %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
{% for url, route, label in nav_right %}
<li class="nav-item">
<a class="nav-link {{ 'active' if active_page==route }}" href="{{ url }}">{{ label }}</a>
</li>
{% endfor %}
</div>
{% endif %}
<div class="navbar-nav border rounded border-1 border-white ml-3 pt-2 pb-2 even-height app-badge">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('user.logout') }}">Log Out</a>
</li>
</div>
{% endif %}
</ul>
</nav>
И мои CSS (если вы заметили navbar-spur- класс admin, он такой же, как navbar-spur-user, но с разными цветами):
/* NAVBAR */
/* NAVBAR */
/* NAVBAR */
/* BASE NAVBAR */
.navbar-spur, .navbar-spur .navbar-brand .navbar-nav {
background-image: none;
background-repeat: no-repeat;
}
.navbar-spur .navbar-brand .parallel img {
max-width: 2.5em;
}
.navbar-spur div a img {
max-width: 1.5em;
}
.navbar-spur .even-height {
height: 3.7em;
}
.navbar-spur .navbar-brand small {
font-size: 0.7em;
}
.navbar-spur a {
text-decoration: none;
}
.navbar-spur .navbar-brand .parallel, .navbar-spur .navbar-nav .parallel {
display: inline-block;
text-align: left;
vertical-align: top;
}
.navbar-spur .navbar-brand .stacked, .navbar-spur .navbar-nav .stacked {
display: block;
}
/* USER NAVBAR */
.navbar-spur-user, .navbar-spur-user .navbar-brand .navbar-nav {
background-color: #003274 !important;
}
.navbar-spur-user .app-badge {
background-color: #002658 !important;
}
.navbar-spur-user .navbar-nav .nav-item .nav-link {
color: #356275 !important;
}
.navbar-spur-user .navbar-nav .nav-item .active {
color: white !important;
}
Любые советы, ссылки на ресурсы, которые могут мне помочь, или отзывы будут с благодарностью. Спасибо!