引导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，左列应该隐藏，如果它有导航栏，那么应该是collasped。我也试图让响应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只有屏幕和（最小 - 设备宽度：320像素）{ .leftNav { 显示：无; }}

而且prefere display:none;而不是height:0px; min-height:0px;

---

更新：

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