Question

在Bootstrap中，所有断点均基于宽度。有可能以身高为基础吗？我解释了我的问题：我有一个网站，左侧有一个侧边栏菜单，用于桌面或类似这样的大宽度

默认情况下，宽度尺寸小于767 px时，汉堡包中的Bootstrap行为更改菜单会像这样

那太好了！我想要另一个条件...当高度小于600px时，我总是想获得汉堡包菜单

所以我要检查宽度和高度...

if (Height < 600px) {displays hamburgher}
if (Height > 600px && Width > 767px) {display sidemenu}  
if (Height > 600px && Width < 767px) {display hamburgher}

这怎么可能？谢谢

我发布了代码： HTML

<header class="nav-down responsive-nav hidden-lg hidden-md ">
        <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <div id="main-nav" class="collapse navbar-collapse">
            <nav>
                <ul class="nav navbar-nav">
                    <li><a href="#">HOME</a></li>
                    <li><a href="#">MENU 1</a></li>
                    <li><a href="#">MENU 2</a></li>
                    <li><a href="#">MENU3</a></li>
                    <li><a href="#">MENU 4</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="sidebar-navigation  hidden-xs">
        <nav>
            <ul>
                <li>
                    <a class="menu-link" href="#" data-target="">
                        Home
                    </a>
                </li>
                <li>
                    <a class="menu-link" href="#" data-target="">
                        MENU 1
                    </a>
                </li>
                <li>
                    <a class="menu-link" href="#" data-target="">
                        MENU 2
                    </a>
                </li>
                <li>
                    <a class="menu-link" href="#" data-target="">
                        MENU 3
                    </a>
                </li>
                <li>
                    <a class="menu-link" href="#" data-target="">
                        MENU 4
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <script src="js/vendor/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    </body>

CSS

.responsive-nav {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 80px;
  background-image: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,69,139,0.8));
  box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
}
.navbar-toggle {
  position: absolute;
  top: 40%;
  left: 50%;
  display: inline-block;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.navbar-nav {
  margin: 0;
  border: none;
}
.navbar-toggle span {
  background-color: #dedede;
}
.sidebar-navigation {
  width: 22.5%;
  float: left;
  height: 100%;
  position: fixed;
  background-color: #00458b;
  z-index: 10;
}
.sidebar-navigation nav {
  position: relative;
  top: 60%;
  left: 60%;
  -webkit-transform: translateX(-60%) translateY(-60%);
  -moz-transform: translateX(-60%) translateY(-60%);
  -ms-transform: translateX(-60%) translateY(-60%);
  -o-transform: translateX(-60%) translateY(-60%);
  transform: translateX(-60%) translateY(-60%);
}
.sidebar-navigation ul {
  margin-left: 45px;
  list-style: none;
  padding: 0;
}
.sidebar-navigation li{
  padding: 10px 0;
}
.sidebar-navigation nav a{
  display: inline-block;
  color: #dedede;
  margin-top: 5px;
  text-decoration: none!important;
  font-size: 15px;
  letter-spacing: 1px;
}
.sidebar-navigation nav a:hover, nav .active-section {
  color: #3fd2c7;
}

@media (max-width: 992px) {
  .responsive-nav {
    display: none;
  }
}
@media (max-width: 767px) {
  .responsive-nav {
    display: block;
    height: 60px;
  }
}

基于高度和宽度的Bootstrap响应式菜单

0 个答案: