Question

我想要实现的是将标题的右侧（从登录和注册按钮）切换到特定大小的浏览器上的汉堡包菜单图标（当调整大小我希望右侧消失并转到汉堡菜单）...

这是代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Test</title>
      <link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="test2.css">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>


        <div class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
           <div class="navbar-header">

             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle Navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
           <a class="navbar-brand" href="#"><img src="images/test1.png" class="img-responsive" ></a>
          </div>

        <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">HOME</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li><a href="#">LINK</a></li>
            <li class="login1"><a href="#">Log In |</a></li>
            <li class="login2"><a href="#">Sign Up</a></li>
            <li class="cart"><img src="images/cart.png"></li>
            <li class="text1"><p>(2)</p></li>
            <li class="text2"><p>total: $</p></li>
            <li class="checkout"><button type="button" class="btn">BUTTON</button></li>

          </ul>

         </div>
        </div>
       </div>






    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>

和CSS：

.navbar-header {
  min-height: 100px;
}

.navbar-nav {
  margin-top: 32px;
  margin-left: 25px;
}

.navbar-nav li {
  color: blue;
  font-size: 15px;
  font-weight: bold;
}

.navbar-nav a {
  color: rgb(60, 113, 132) !important;
}

.navbar-toggle {
  margin-top: 30px;
}

.navbar-brand {
  margin-top: 12px;
  position: relative;
  left: 20px;
}

.login1 {
  margin-left: 60px;
}

.login1 a {
  color: rgb(149, 149, 149) !important;
}

.login2 {
  margin-left: -26px;
}

.login2 a {
  color: rgb(149, 149, 149) !important;
}

.subtotal {
  display: inline;
}

.cart {
  margin-top: 10px;
  margin-left: -10px;
}

.text1 {
  margin-top: 15px;
  margin-left: 4px;
  color: rgb(149, 149, 149) !important;
}

.text2 {
  margin-top: 15px;
  color: rgb(149, 149, 149) !important;
}

.checkout button {
  background-color: rgb(108, 181, 173);
  color: #fff;
  font-weight: bold;
  margin-left: 15px;
  margin-top: 5px;
  width: 120px;
  height: 40px;
}





@media (max-width: 1335px) {
  .navbar-nav li,
  .navbar-brand img {
    position: relative;
    right: 20px;
    font-size: 13px;
  }

  .login1 a,
  .login2 a,
  .cart img, {
    position: relative;
    right: 15px;
  }
}


@media (max-width: 1249px) {
  .navbar-nav li,
   {
    position: relative;
    right: 35px;
    font-size: 12px;
  }

  .navbar-brand img {
    width: 147px;
    height: 56px;
  }

  .login1 a,
  .login2 a,
  .cart img,
  .checkout button,
  .text1 p,
  .text2 p {
    position: relative;
    right: 45px;
  }
}



@media (max-width: 1218px) {

}



@media (max-width: 1199px) {
  .navbar-nav li {
    font-size: 13px;
  }
}

正如你所看到的，在媒体查询中（最大宽度：1218px）我想右侧消失并去汉堡菜单..我希望我很清楚

Answer 1

是否可以尝试为1218 max-height

添加此媒体查询

    @media (max-width: 1218px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

如果这对您有用，请告诉我。谢谢。

如何切换登录和注册特定大小（媒体查询）？

1 个答案: