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 only screen and（min-device-width：320px）{ .leftNav { 显示：无; } }~~

并优先display:none;而不是height:0px; min-height:0px;

更新：

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

Bootstrap 3垂直导航栏响应

1 个答案: