jquery - Bootstrap 3 垂直导航栏响应

Question

我已经制作了具有固定 height 的垂直导航栏，但它在响应式网站和某些页面中没有变得可折叠，我没有使用导航栏，但保留了没有导航栏的左栏，我需要它消失

下面是我的代码

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 nopadding leftNav">
      <nav class="navbar leftmenu navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
          <ul class="nav nav-stacked navVerticale">
            <li class="active" id="#about"><a href="#">About Plexus</a></li>
            <li id="#vision"><a href="#">Vision & Mission</a></li>
            <li id="#objective"><a href="#">Objectives</a></li>
            <li id="#headQuaters"><a href="#">Headquaters</a></li>
            <li id="#qualityPolicy"><a href="#">Quality Policy</a></li>
            <li id="#orgChart"><a href="#">Organization Chart</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="col-md-9">
      <!-- Over here big text with different height-->
    </div>
  </div>
</div>

CSS

.leftmenu {background:none;padding:40px;background-repeat:no-repeat;font-family:'eurostileregular';font-size:17px;}
.leftNav {height:600px; min-height:600px;background:#808080;background-image:url('/images/arch.png');background-repeat:no-repeat;}
.nopadding {padding: 0 !important;margin: 0 !important;}
.navVerticale > li > a { color: #fff;width:100%}
.navVerticale {width:100%;text-align:right;}
.navVerticale li.active a:after,.navVerticale li:hover a:after { content:"";position:absolute;left:65%;right:0;height:1px;width:30%;border-bottom:1px solid #ad1f2d;padding-bottom:1px;display:block;}

我正在寻找的是当它出现在手机和 ipad 上时，左列应该隐藏起来，如果它有导航栏，那么应该折叠起来。我也尝试制作如下响应式 css，但它在普通网站中也变成了高度

 @media only screen and (min-width : 320px) {
     .leftNav{height:0px;min-height:0px;}
 }

 /* Extra Small Devices, Phones */ 
 @media only screen and (min-width : 480px) {

 }

 /* Small Devices, Tablets */
 @media only screen and (min-width : 768px) {

 }

 /* Medium Devices, Desktops */
 @media only screen and (min-width : 992px) {

 }

 /* Large Devices, Wide Screens */
 @media only screen and (min-width : 1200px) {

 }

我的CSS引用是这样的

<meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="" />
  <meta name="author" content="" /> 
<link href="css/style.css" rel="stylesheet" />
    <link href="css/responsive.css" rel="stylesheet" />


@media only screen and (min-device-width : 320px){
  .leftNav {
    display: none;
  }
} 

Answer 1

使用 @media only screen and (min-device-width : 320px) 以便仅针对手机和平板电脑(而非台式机):

@media only screen and (min-device-width : 320px) { .leftNav{ 显示:无； } }

并且更喜欢 display:none; 而不是 height:0px;最小高度:0px;

---

更新:

@media only screen and (max-device-width : 320px) {
    .leftNav{
        display:none;
    }
}