Как сохранить панель навигации свернутой на всех размерах экрана?

Question

Я попробовал эти два разных решения, предложенные здесь на SO:

• Как сохранить Bootstrap 3 navbar в свернутом виде для всех размеров экрана
• Изменить bootstrap Точка останова сваливания navbar без использования LESS

Я также пробовал множество других решений, предлагающих более или менее то же самое. Ни один из них не помог мне.

Как сделать так, чтобы панель навигации Bootstrap 3 была свернута на всех экранах, больших и маленьких?

Это HTML:

<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="index.html">
             <img class="img-responsive imglogoheader" src="images/logo1.png">
        </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.html">Home</a></li>
        <li><a href="profile.html">Profile</a></li>
         <li><a href="settings.html">Settings</a></li>
      <ul style="display:none !important;" class="nav navbar-nav navbar-right"></ul>
    </div>
  </div>
</nav> 

Answer 1

Ответ, предложенный Дао, сработал на 60%, но не полностью для меня. Здесь я делюсь тем, что наконец-то сделало это для меня. В моем custom. css я переопределяю bootstrap с пользовательскими правилами

custom. css

@media (min-width: 768px) {
  .navbar .navbar-header,
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav {
    float: none;
    margin: 7.5px -15px;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-right: 0;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar .navbar-collapse.collapse {
    display: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .navbar-text {
    float: none;
    margin: 15px 0;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block;
  }
  .navbar .collapsing {
    overflow: hidden;
  }
}

Мне пришлось закомментировать эту строку в bootstrap.min.cs чтобы все заработало:

  .navbar-collapse.collapse {
    /* display:block!important;*/
     height:auto!important;
     padding-bottom:0;
     overflow:visible!important
    }

Answer 2

Чтобы сделать меню навигационной панели переключаемым на всех интервалах реагирования в Bootstrap 3, вам понадобится следующий фрагмент:

@media (min-width: 768px) {
  .navbar {
    .navbar-header,
    .navbar-nav>li {
      float: none;
    }
    .navbar-nav {
      float: none;
      margin: 7.5px -15px;
    }
    .navbar-toggle {
      display: block;
      margin-right: 0;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
      display: none;
    }
    .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .navbar-text {
      float: none;
      margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
      display: block;
    }
    .collapsing {
      overflow: hidden;
    }
  }
}

Обратите внимание, что это S CSS. Если вы хотите, чтобы оно было CSS, вы можете скопировать / вставить его из демонстрации в конце ответа.

Решение в значительной степени адаптировано из этого ответа , но я подумал, что оно того стоит публиковать его как чистый, а не предлагать вам поиграть с точками останова и очистить его. Самое главное, что он не использует !important.

Не стесняйтесь поднять первоначальный ответ. Это исключительное решение сложной проблемы, особенно учитывая сложность механики navbar c navbar *1024*, созданной Bootstrap 3 (это делается с помощью плагина коллапса в JavaScript - что затрудняет отладку и / или обратный инжиниринг ).

Посмотрите, как это работает:

@media (min-width: 768px) {
  .navbar .navbar-header,
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav {
    float: none;
    margin: 7.5px -15px;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-right: 0;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar .navbar-collapse.collapse {
    display: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .navbar-text {
    float: none;
    margin: 15px 0;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block;
  }
  .navbar .collapsing {
    overflow: hidden;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
             Logo
        </a>
    </div>
    <div class="collapse .navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.html">Home</a></li>
        <li><a href="profile.html">Profile</a></li>
        <li><a href="settings.html">Settings</a></li>
      </ul>
    </div>
  </div>
</nav>