Navbar折叠但未显示“折叠菜单版”

时间：2015-03-23 08:46:21

标签： jquery html css twitter-bootstrap

我有自举的导航栏菜单，它在桌面版中表现不错，但在平板电脑和手机中，当它显示折叠菜单时，下拉菜单与桌面版相同，相反，移动版本应如下所示：

It collapses but shows desktop version

HTML： 

  <nav class="navbar navbar-simelsa">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
       <div class="menu-text hidden-lg hidden-md hidden-sm">Menú<button type="button" class="navbar-toggle collapsed navbar-bottom" data-toggle="collapse" data-target="#navbar-simelsa">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-center" id="navbar-simelsa">
      <ul class="nav navbar-nav">
        <li class="inicio"><a href="#">Inicio</a></li>
        <li class="nosotros"><a href="#">Nosotros</a></li>
        <li class="dropdown servicios">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicios <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
       <li class="productos"><a href="#">Productos</a></li>
        <li class="noticias"><a href="#">Noticias</a></li>
        <li class="contacto"><a href="#">Contacto</a></li>
      </ul>
        <li class="lang navbar-right nav navbar-nav"><a href="#">ESP | ENG</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS： 

@media (min-width: 1024px) {

.slick-prev, .slick-next {
    top: -12% !important;
    }
}
@media (max-width: 1024px) {

.header-bg {
    background: none !important;
}

.slick-prev, .slick-next {
  top: -13% !important;
  }
#navbar-simelsa a {
    font-size: 0.8em !important;

}

.slider-bottom {
  background-position: -35px -479px !important;
}
.box-content-carousel:hover .slider-bottom {
  background-position: -33px -499px !important;

}
}


@media (max-width: 768px) {

.footer-copyright {
    margin-left: 0px !important;
}
#navbar-simelsa a {
  font-size: 0.6em !important;
}
#navbar-simelsa ul.navbar-nav li {
  margin-right: 10px !important;
}
}
@media (max-width: 640px) {

.header-bg {
   /* margin: 0 auto; */
     background-image:url('../images/header-img.png');
    background-repeat: no-repeat;
    background-position: 500px 0;
    height: 113px !important;
}

.social {
    margin-top: 10px !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#layerslider .ls-s-1 {
height: 60px !important;
}
.footer-logo {
    padding-top: 30px;
}

.slider-bottom {
  background-position: -55px -479px !important;
}
.box-content-carousel:hover .slider-bottom {
  background-position: -53px -499px !important;

}

}


@media (max-width: 480px) {

  .title-container-inicio {
      font-size: 1.3em !important;
  }
.footer-copyright  {

    font-size: 0.7em !important;

}

#layerslider .ls-s-1 {

    height: 40px !important;

}

.slider-bottom {
  background-position: -40px -479px !important;
}
.box-content-carousel:hover .slider-bottom {
  background-position: -43px -499px !important;

}


  .slick-prev, .slick-next {
  top: -13% !important;
  }

.box-content-carousel:hover .slider-bottom {
  background-position: -38px -499px !important;

} 

}
@media (max-width: 479px) {
.slider-bottom {
  background-position: 22px -479px !important;

    }
    .box-content-carousel:hover .slider-bottom {
  background-position: 24px -499px !important;

} 
.box-content-carousel img {
  margin-left: auto !important;
  margin-right: auto !important;
  }
    .slick-prev, .slick-next {
  top: -11% !important;
  }

  }

@media (max-width: 320px) {

    .slick-prev, .slick-next {
  top: -11% !important;
  }
  }


@media (min-width: 640px) and (max-width: 768px) {

.box-content-carousel h2 {
    font-size: 1.1em !important;
}
}

html {
    height: 100%;
}

body {
        height: 100%;
    margin: 0;
    background-repeat: no-repeat;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#dbeef4, endColorstr=#fff);
 background-image:-moz-linear-gradient(top, #dbeef4 40%, #fff 50%);
 background-image:-webkit-linear-gradient(top, #dbeef4 40%, #fff 50%);
 background-image:-ms-linear-gradient(top, #dbeef4 40%, #fff 50%);
 background-image:linear-gradient(top, #dbeef4 40%, #fff 50%);
 background-image:-o-linear-gradient(top, #dbeef4 40%, #fff 50%);
  background-image: -webkit-gradient(linear, right top, right bottom, color-stop(40%,#dbeef4), color-stop(50%,#fff));
   }

.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    background: transparent !important;
}
.header-logo {
    background-color: #33add3;
    width: 100%;
 box-shadow: inset 0 -21px 19px -24px #808080;
    -moz-box-shadow: inset 0 -21px 19px -24px #808080;
  -webkit-box-shadow: inset 0 -21px 19px -24px #808080;
}
.header-bg {
   /* margin: 0 auto; */
     background-image:url('../images/header-img.png');
    background-repeat: no-repeat;
    background-position: 500px 0;
    height: 133px;
}
#navbar-simelsa .lang a {
    color: #22a6cf;
    font-size: 1.1em;
    font-weight: 400;
    font-family: 'Ubuntu', sans-serif !important;
}
.lang {
    border-right: 0px !important;
    border-left: 0px !important;
    margin-right: 10px !important;
    line-height: 3em;
    text-decoration: none;
}
.logo {
    margin-top: 20px;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.social ul li {
    display: inline-block;
    margin-right: 5px;

}

.social ul {
    list-style-type: none !important;
}

.social {
    margin-top: 73px;
}

#navbar-simelsa ul.navbar-nav li:first-child {
  border-left: 1px solid #dfdfdf;
  padding-left: 35px;

}
#navbar-simelsa ul.navbar-nav li {
  margin-right: 20px;
  border-right: 1px solid #dfdfdf;
  padding-left: 15px;
  height: 26px;
}

.dropdown-menu .divider {
  height: 1px;
  margin: -6px 0px 13px 0px;
  overflow: hidden;
  background-color: #e5e5e5;
}

.dropdown-menu li:first-child {
    padding-top: 10px;

}
.navbar-simelsa {
        background: #f2f2f2;
    border: 1px solid #fff;
    margin-bottom: 2px !important;
}
#navbar-simelsa a:hover, #navbar-simelsa a:active, #navbar-simelsa a:focus {
        background-color: transparent;
}
#navbar-simelsa a {
    font-family: 'Raleway', sans-serif !important;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 0em;
    font-weight: 200;
    color: #464646;

}
#navbar-simelsa ul {
margin-bottom: 10px;
margin-top: 10px;

}
#navbar-simelsa {
    text-align: left !important;
}
@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}


#navbar-simelsa .navbar-nav .open .dropdown-menu>li {
  color: pink !important; 
    display: block;
  clear: both;
  font-weight: 400;
  padding-left: 0px !important;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
    margin-right: 0px !important;
}

.menu-text {
      border: 1px solid #D2D2D2;
  height: 45px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.1em;
  color: #939393;
  border-radius: 10px;
  margin-left: 5px;
  margin-right: 5px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.navbar-bottom {
    position: relative !important;
    margin-top: 0px !important;
    border: 0px !important;
    padding-top: 5px;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #939393;
  border-radius: 1px;
}


#navbar-simelsa ul.navbar-nav li.divider {

    height: 1px !important;

}
.inicio {
    background-position: 18px 2px;
}

.nosotros {
    background-position: 0 -24px;
}

.noticias {
    background-position: 0 -105px;
}

.contacto {
    background-position: 0 -132px;
}

.servicios {
    background-position: 0 -50px;
}

.productos {
    background-position: 0 -79px;
}

.inicio, .nosotros, .noticias, .contacto, .servicios, .productos, .calendar, .slick-prev, .slick-next, .slider-bottom, .container-bottom-bg, .certified {
      background-image:url('../images/sprites.png');
      background-repeat: no-repeat;
}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.social ul li:hover
{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

/* LayerSlides */

#layerslider .ls-s-1 {
    background: #33add3;
    width: 284px;
    height: 260px;
    top: 45px !important;
    left: 60px !important;
    padding: 30px 20px 30px 35px;
}

#layerslider .ls-s-1 .title-box-slider {

    font-family: 'Raleway', sans-serif !important;
    font-weight: 400;
    color: #fff;
    line-height: 1.4em;
    font-size: 1.5em !important;

}

#layerslider .ls-s-1 p.desc {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400;
    color: #1b1c21;
    line-height: 2em !important;
    font-size: 0.95em !important;

}    

.hr-img {
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 25px;
}

.welcome {
    font-family: 'Raleway', sans-serif !important;
    color: #999999;     
}
.welcome h1 {
    font-weight: 200;
    font-size: 2.1em;
}
.welcome p {
    font-weight: 400;
    font-size: 1.1em;
    line-height: 1.7em;
    margin-bottom: 25px;
}

.news {
    background: #e3ebed;
    min-height: 113px;
}

.news-img {
        overflow: hidden;

}
.news img {
      -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -moz-transition: all 0.5s ease; /* Firefox */
    -o-transition: all 0.5s ease; /* IE 9 */
    -ms-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease;
}
.news:hover img {
      -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}
.calendar {
    background-position: 0 -333px;
    padding-left: 20px;
    color: #33add3;
    font-size: 0.8em;
    font-weight: 300;    

}
.box-text {
    padding: 10px;
    font-family: 'Raleway', sans-serif !important;
}
.box-text p {
    margin-top: 10px;
    font-size: 1em;
    font-weight: 400;
    color: #000;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.title-container-inicio {
    border-bottom: 1px solid #f2f2f2;
    font-size: 1.6em;
    font-weight: 500;
    font-family: 'Raleway', sans-serif !important;
    color: #464646;
    margin-top: 20px;
    margin-right: 10px;
    padding-bottom: 5px;
}
.box-news {
    padding-left: 10px;
    padding-right: 10px;
}

/* Slider 2 */

.box-content-carousel {
    width: 268px;
    margin-right: 30px;
}
.slider-2 {
    margin-left: 15px;
}

.slick-prev.slick-disabled {
  background-position: 0 -416px !important;

}
.slick-next.slick-disabled {
  background-position: 0 -446px !important;

}
.slick-prev, .slick-next {
    width: 25px !important;
    height: 25px !important
}

.slick-next {
  right: 5px !important;
  background-position: 0 -356px !important;
}

.slick-prev {
  right: 35px !important;
  background-position: 0 -386px !important;
}

.box-content-carousel h2, .box-content-carousel p {
  font-family: 'Raleway', sans-serif !important;
  color: #838484;    
  font-weight: 200 !important;

}

.box-content-carousel h2 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.slider-img {
    border: 3px solid transparent;
    transition: all 0.5s ease;
}
.box-content-carousel:hover .slider-img {
    border: 3px solid #33add3;
    border-radius: 3px;
}

.box-content-carousel:hover {
    cursor: pointer;

}
.slider-bottom {
  background-position: 0 -479px;
  padding-top: 13px;
  display: block;
    -o-transition: all .5s;
  -moz-transition: all .5s;
   -webkit-transition: all .5s; 
  -ms-transition: all .5s;
}

.box-content-carousel:hover .slider-bottom {
  background-position: 2px -499px;

}

/* Footer */

.footer {
    background: #f5f6f6;
}

.container-bottom-bg {
  background-position: 73px -524px !important;
  padding-top: 20px;
  display: block;
  width: 738px;

}    

.footer-copyright {
    margin-left: 100px;
}

.footer-copyright, .footer-copyright a {
    color: #33add3;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1em;
    text-decoration: none;
    margin-top: 15px;

}
.link-footer-col {
    max-width: 870px;
    margin-bottom: 40px;
}

.link-footer-col h4, .link-footer-col p  {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400 !important;
    font-size: 1em;

}

.link-footer-col h4  {

    color: #33add3;
    text-transform: uppercase;

}

.link-footer-col p  {

    color: #464646;
    font-size: 0.95em !important;
    line-height: 0.9em;
}

.certified {
  background-position: 0px -530px !important;
  padding: 280px;
  display: block;
}

.certified-img {
    margin-top: 80px;
}

2 个答案:

答案 0 :(得分：0)

您需要将<nav>课程从navbar navbar-simelsa更改为：

navbar navbar-default navbar-simelsa

确保您在<head>中包含了bootstrap的CSS，jQuery和bootstrap的Javascript：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

查看navbar和collapse.js的文档。

<强> HTML ：

<nav class="navbar navbar-default navbar-simelsa">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-simelsa">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-center" id="navbar-simelsa">
      <ul class="nav navbar-nav">
        <li class="inicio"><a href="#">Inicio</a>
        </li>
        <li class="nosotros"><a href="#">Nosotros</a>
        </li>
        <li class="dropdown servicios">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Servicios <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
        <li class="productos"><a href="#">Productos</a>
        </li>
        <li class="noticias"><a href="#">Noticias</a>
        </li>
        <li class="contacto"><a href="#">Contacto</a>
        </li>
      </ul>
      <li class="lang navbar-right nav navbar-nav"><a href="#">ESP | ENG</a>
      </li>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

请参阅 Example 。

答案 1 :(得分：0)

我认为您需要在navbar-default元素中保留<nav>课程：

<nav class="navbar navabar-default navbar-simelsa">

然后，您可以使用自己的班级navbar-simelsa

覆盖样式
相关问题
最新问题