2
У меня есть нормальный Bootstrap 3 фиксированный навигатор в верхней части моего сайта, который действительно хорош. Проблема, с которой я столкнулся и обнаружил на днях, заключалась в том, что когда навигационная панель сворачивается для доступа к более мелким устройствам, выпадающие элементы уходят с области, обозначенной для навигационной панели. На рисунке ниже показано, что лучше:Collapsed Bootstrap 3 Navbar выходит за пределы (выпадающие списки)
Итак, Дуги часть является пункт выпадающего меню. При щелчке элементы под ним (отмеченные красным) выходят за пределы красной части меню. Разве навигатор не должен спускаться с ними и скрывать пространство?
В любом случае, я, очевидно, коснулся стиля навигатора, и я думаю, что это происходит неправильно. Вот что я прикоснулся:
.navbar-default {
background-color: @dry-red;
background-image: -moz-linear-gradient(top, @dry-red, @mid-red);
background-image: -ms-linear-gradient(top, @dry-red, @mid-red);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@dry-red), to(@mid-red));
background-image: -webkit-linear-gradient(top, @dry-red, @mid-red);
background-image: -o-linear-gradient(top, @dry-red, @mid-red);
background-image: linear-gradient(top, @dry-red, @mid-red);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@dry-red', endColorstr='@mid-red', GradientType=0);
border-color: @dark-red;
overflow: visible;
max-height: 51px;
@media (max-width: 768px){
max-height: none;
height: auto;
}
@media (max-width: 470px){
width: 100%;
position: fixed;
top: 0;
left: 0;
}
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
max-height: 51px;
@media (max-width: 768px){
max-height: none;
}
}
.navbar-default .navbar-brand {
color: @lighten;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: @lighten-hover;
}
.navbar-default .navbar-nav > li > a {
color: @lighten;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: @lighten-hover;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: @lighten;
background-color: @dark-red;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: @lighten-hover;
background-color: @dark-red;
}
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: @dark-red;
border-bottom-color: @dark-red;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: @dark-red;
border-bottom-color: @dark-red;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: @dark-red;
border-bottom-color: @dark-red;
}
.navbar-default .navbar-toggle {
border-color: @dark-red;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: @dark-red;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: @lighten;
}
.nav > .dropdown, .dropdown-menu > li {
position: relative;
overflow: visible;
}
.navbar-collapse.in {
overflow-y: visible;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: @lighten;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: @lighten-hover;
}
}
.dropdown-menu:before {
position: absolute;
top: -7px;
right: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
right: 9px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.nav-center {
position: absolute;
width: 91px;
height: 50px;
left: 50%;
margin-left: -45px;
z-index: 100;
}
.navbar-inner {
position: relative;
}
И это HTML:
<nav class="website-nav navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-inner">
<div class="nav-center">
<!-- <img src="{{ S_WEB_PATH }}images/brand.png" /> -->
<div class="nav-brand"></div>
</div>
</div>
<div class="alt-nav navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toogle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- Navigation header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li {{ INDEX_ACTIVE }}><a href="home"><span class="glyphicon glyphicon-cloud-upload"></span> Home</a></li>
<li {{ REMOTE_ACTIVE }}><a href="remote"><span class="glyphicon glyphicon-globe"></span> Remote</a></li>
<li {{ ZIP_ACTIVE }} class="visible-lg"><a href="zip"><span class="glyphicon glyphicon-folder-close"></span> ZIP</a></li>
<li {{ POPULAR_ACTIVE }}><a href="popular"><span class="glyphicon glyphicon-star"></span> Popular</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if not S_LOGGED_IN %}
<li><a href="#register" data-toggle="modal"><span class="glyphicon glyphicon-registration-mark"></span> Register</a></li>
<li><a href="#login" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
{% else %}
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span class="badge user-messages">0</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-bell"></span> <span class="badge user-notification">0</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle valign-middle" data-toggle="dropdown"><span class="glyphicon glyphicon-camera"></span> My Images</a>
<ul class="dropdown-menu">
<li><a href="#">All images</a></li>
<li class="divider"></li>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
{% if S_SERVICE_USED == 'facebook' %}
<img src="https://graph.facebook.com/{{ S_USERNAME }}/picture" height="24px" class="img-circle avatar" alt="Avatar">
{% else %}
{% if S_USER_AVATAR != '' %}<img src="{{ S_AVATAR_PATH }}" id="my_avatar" height="24px" class="img-circle avatar" alt="Avatar">{% else %}<span class="glyphicon glyphicon-user"></span>{% endif %}
{% endif %}
<span class="{% if S_SERVICE_USED == 'facebook' or S_USER_AVATAR != '' %}valign-middle{% endif %}">{{ S_USERNAME }}</span>
</a>
<ul class="dropdown-menu">
<li><a href="{{ S_WEB_PATH }}user/{{ S_USERNAME }}"><span class="glyphicon glyphicon-user"></span> Me</a></li>
<li><a href="#settings" data-toggle="modal"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
{% if S_SERVICE_USED != 'facebook' and S_SERVICE_USED != 'twitter' %}<li><a href="#profile" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit Profile</a></li>{% endif %}
<li><a href="{{ S_WEB_PATH }}user/do/logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
</ul>
</li>
{% endif %}
</ul>
</div>
</nav><!-- Navigation -->
Все, кроме этого, нет ничего я прикоснулся. Я попытался исправить эту проблему в .navbar-default путем добавления этого в нем:
@media (max-width: 768px){
max-height: none;
height: auto;
}
Это ничего не делать.
Любая помощь будет оценена по достоинству, так как это действительно раздражает, когда это происходит и не имеет понятия, откуда она взялась. Может ли это быть проблемой Bootstrap? Я сомневаюсь в этом.
Ссылка: https://github.com/twbs/bootstrap/issues/12006 (может быть, вы его открыли?) – Zlatan
Пожалуйста, добавьте jsFiddle для этого. – Zlatan
Это еще одна проблема.Ссылка на GitHub не имеет отношения к этому вопросу. – Aborted