Question

使用bootstrap。我在991px中将断点更改为折叠菜单。

菜单正在折叠，但仍停留在sm中。在xs中工作正常。它看起来像是在崩溃，但并没有消失。

无法想象什么是造成的。链接如下。

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="meniu">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#meniucollapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

          <div class="logo-box">
            <a class="navbar-brand" href="{% url 'home' %}">
              <img  id="logotipas" src="{% static 'images/log_pure_small.jpg' %}" alt="logo"/>
            </a>
          </div>          
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="meniucollapse">
      <ul class="nav navbar-nav">                 
            <li><a data-toggle="collapse" data-target="#meniucollapse" href="#paslaugos" ><span>1 link </span></a></li>
            <li><a data-toggle="collapse" data-target="#meniucollapse"  href="#marsrutas"><span>2 link </span></a></li>
            <li><a data-toggle="collapse" data-target="#meniucollapse" href="#kainos"><span>3 link </span></a></li>
            <li><a data-toggle="collapse" data-target="#meniucollapse" href="#taisykles"><span>4 link </span></a></li>
            <li><a data-toggle="collapse" data-target="#meniucollapse" href="#kontaktai"><span>5 link </span></a></li>
      </ul>
    </div>
  </div>
</

CSS：

    .navbar-default {
  background-image:none;
  background-color: #373737;
}
/*BIG SCREENS*/
@media all and (min-width: 991px) {

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav > li > a {
  width: 120px;
  height: 65px;
  font-size: 16px;
  border-left: 10px solid #178ACC;
  transform: skewX(-45deg); 
  background-color: #000;
  color: #f4ebeb;
}


.navbar-default .navbar-nav > li > a >span {
    display:inline-block;
    transform: skewX(45deg); 
    vertical-align: middle;
    padding-top: 5px;
    padding-left: 2px;


}

.navbar-default .navbar-nav > .active #uzsakymo-linkas {
  background-color: #FC6607;
  color:#fff;
  margin:0px;
  width:160px;
  border-right: 10px solid #178ACC;
}

.navbar-default .navbar-nav > li>#uzsakymo-linkas > span {
  padding-top: 0px;
  padding-left: 0px;
  text-align: center;
}
} /*end of big screens*/
/*SMALL SCREENS*/
@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-collapse .collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-default .navbar-nav>.active>a,
  .navbar-nav>li>a 
  {
      padding-top: 5px;
      padding-bottom: 5px;
      color: #727272;
      width: 500px;
      border-left: 5vw solid #178ACC;
      height: 40px;
      font-size: 16px;
      color: #f4ebeb;
      background-color: #000;
    }

  .navbar-default .navbar-nav > li > a >span {
    display:inline-block;
    vertical-align: middle;
    padding-top: 5px;
    padding-left: 2px;

    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /*.navbar-collapse .collapse .in { */

    .navbar-collapse .collapse .in { 

        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

} /*end small screens*/

Answer 1

我将small-screen的css代码更改为我之前使用过的css代码并且工作正常，当然，我将您的属性设置为li a span ：

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-default .navbar-nav>.active>a,
    .navbar-nav>li>a {
        padding-top: 5px;
        padding-bottom: 5px;
        color: #727272;
        width: 500px;
        border-left: 5vw solid #178ACC;
        height: 40px;
        font-size: 16px;
        color: #f4ebeb;
        background-color: #000;
    }
    .navbar-default .navbar-nav > li > a > span {
        display:inline-block;
        vertical-align: middle;
        padding-top: 5px;
        padding-left: 2px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

jsfiddle-link

更改媒体查询后，引导程序折叠菜单保持不变

1 个答案: