引導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; 
    } 
}