靴带3.3.4导航栏collpase

Question

我正在尝试使用navbar来获取平板电脑尺寸，我使用了以下代码：

 <nav class="navbar navbar-default navbar-custom" style="background-color: white; border: none; margin-top: 10px;" role="navigation">
     <div class="container-fluid">    
         <div class="navbar-header">    
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>    
          </div>    
          <div class="collapse navbar-collapse  navbar-custom" id="myNavbar">
              <ul class="nav navbar-nav">
                  <li class="button hvr-sweep-to-bottom "><a href="About.aspx">Home</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 1</a></li>    
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 2</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 3</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 4</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 5</a></li>
                  <li class="button hvr-sweep-to-bottom"><a href="#">Page 6</a></li>    
              </ul>    
          </div>

我的导航栏确实为移动设备进行了拼图，并且完美地适用于移动设备，问题是我正在使用一个名为.custom-navbar的类来自定义标准导航栏，并尝试找出如何将其用于移动设备的拼写说1199px， 我正在尝试解决此代码以获得我想要的结果

@media screen and (max-width:1000px){


    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .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-collapse.collapse.in {
        display: none!important;
    }
}

工作示例：

@media screen and (max-width:1000px){


    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .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-collapse.collapse.in {
        display: none!important;
    }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-custom" style="background-color: white; border: none; margin-top: 10px;" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse  navbar-custom" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="button hvr-sweep-to-bottom "><a href="About.aspx">Home</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 1</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 2</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 3</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 4</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 5</a></li>
        <li class="button hvr-sweep-to-bottom"><a href="#">Page 6</a></li>
      </ul>
    </div>