Навбар свернул выпадающий текст перекрывает

Я использую bootstrap и изменил точку останова navbar, потому что у нас там много элементов. Чтобы уменьшить это, я использовал пару выпадающих списков, и они отлично работают на настольных и мобильных устройствах, но у планшетов есть проблема при открытии выпадающего списка. Между новой точкой останова (991px) и точкой по умолчанию (768px) раскрывающееся меню не выдвигает содержимое под ним, как на мобильном устройстве, а перекрывает его, как на рабочем столе.

Это CSS, который я использую для изменения точки останова, вероятно, что-то там не хватает, но не знаю, что:(

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

И здесь у вас есть jsfiddle, чтобы лучше рассмотреть мое объяснение. JsFiddle к проблеме

Источник

2 ответа

Решение

Добавьте следующие CSS внутри ваших стилей:

@media (max-width: 991px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

Вот рабочий фрагмент:

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  .navbar-left,.navbar-right {
    float: none !important;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none!important;
  }
  .navbar-nav {
    float: none!important;
    margin-top: 7.5px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in{
    display:block !important;
  }
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a>
    <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">ES</a></li>
          <li><a href="#">EN</a></li>
        </ul>
      </li>
      <li><a href="#">More</a></li>
      <li><a href="#">Options</a></li>
    </ul>
  </div>
</div>

Источник

Найти обновленный здесь jsfiddle.net/dxfu0hyh/12/ Попробуйте применить стили для класса.drodown-menu:hover:focus и т. д.,

Источник
Другие вопросы по тегам