Bootstrap 3响应式Navbar覆盖下拉菜单和100%高度

时间:2018-10-22 16:55:36

标签: mobile twitter twitter-bootstrap-3 responsive

在移动设备上,Bootstrap 3的默认行为是在菜单单击时带有标准导航菜单,将内容向下推到页面上。相反,我将其覆盖内容。但是问题是,我需要这个覆盖层才能达到100%的高度。

我不能使用固定导航栏,因为我不希望菜单,标题或导航跟随我进入页面。

/* Primary Navigation styles */

        .navbar { margin-bottom: 0; }
        .navbar .navbar-collapse { z-index: 99; }
        .navbar-toggle { float: left; margin-left: 15px; margin-right: 0; }

        @media (max-width: 1200px) { 

            /* Primary Navigation responsive styles */

            .navbar-nav { float: none!important; margin: 7.5px -15px;  }
            .navbar-nav>li { float: none; }
            .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px;  }
            .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; }
            .navbar .navbar-collapse { position: absolute; width: 100%; background-color: white;}
            .navbar-default .navbar-toggle { border: 0 none; margin-top: 28px; margin-bottom: 0; }
            .navbar-header { height: 90px; position: relative; float: none; }
            .navbar-toggle { display: block; }
            .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);  }    
            .navbar-collapse.collapse { display: none!important; }
            .collapse.in { display: block !important; }

        }

        @media (min-width: 1201px) { 


            /* Primary Navigation responsive styles */

            .navbar { min-height: 0; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out; -o-transition: all 0.6s ease-out; -ms-transition: all 0.6s ease-out; transition: all 0.6s ease-out; border-radius: 0px; }
            .navbar-nav{ float:none; margin: 0 auto; display: table; table-layout: fixed;  }
            .navbar-nav > li > a { padding: 10px 29px;  }

        }

      <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2">

        <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 class="collapse navbar-collapse" id="navbar-collapse-2">

        <ul class="nav navbar-nav">

          <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Menu Option</a>

            <ul class="dropdown-menu">

              <li>

                <div class="row">

                    sample text

                </div>

              </li> 

            </ul>

          </li>

        </ul>

      </div>


      <!-- /.navbar-collapse -->

    </nav>

0 个答案:

没有答案