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

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

html css twitter-bootstrap-3

Html 如何切换特定大小的登录和注册（媒体查询）？,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我试图实现的是将标题的右侧（从“登录”和“注册”按钮）切换到特定大小浏览器上的“汉堡菜单”图标（当“调整大小”按钮消失并转到“汉堡菜单”时）以下是代码： <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <link rel="stylesheet" href="https://maxcdn.bootstrap

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

以下是代码：

    <!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>

正如您所看到的，在媒体查询（最大宽度：1218px）中，我想右侧消失并进入汉堡包菜单。我希望我是清楚的。

您能尝试将此媒体查询添加到1218最大高度吗

    @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;
    }
}

让我知道这是否适合你。

谢谢。

为什么要用

Bootstrap-4

标记Bootstrap 3问题？是的，部分是这样的…我希望菜单保持原样（主页、链接、链接…），但菜单的右侧部分（登录和注册按钮等）进入汉堡包菜单…最后，当您将浏览器调整到移动屏幕时，整个导航栏都应该进入汉堡包，只需标识即可保持可见

    @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;
    }
}