html - 左侧栏响应问题

标签 html twitter-bootstrap css

  <script>

     function toggleSidebar()
     {
       document.getElementById("sidebar").style.display = "none";

      }

    </script>

    </head>
    <body>
    <div class="col-md-12 col-sm-12">
    <nav class="navbar navbar-default cs-navabar navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">
            <img  class="left-logo" src="lefttoplogo.svg">
            <h6 class="emotext"><u>login</u></h6> <img  class="right" src="rtlogotop.svg">
                <p class="logout-text"><u>LOGOUT</u></p> 
          </a>
        </div>
      </div>
    </nav>
    </div>
    <div id= "sidebar">
      <div class="toggle-btn" onclick="toggleSidebar()">
        <span></span>
        <span></span>
        <span></span>

      </div>

      <img class="adminlogo" src="admin.svg">
       <ul>
       <img src="Untitled-3.svg">
        <li>Add </li>
        <li>View</li>
        <li>App</li>
        <li>Add</li>
        <li>SMS  </li>
        <li>Edit</li>
        <li>SMS</li>
        <li>Contact</li>
      </ul>
    </div>

上面是左侧边栏的代码片段,我面临着有关带有侧边栏的移动设备的响应问题,当屏幕宽度减小时它不会隐藏。请问是否有人可以帮助解决上述问题?

最佳答案

您可以使用 window.width 编写一个函数,这样只要宽度小于 480,您就可以定位要隐藏的元素。像这样:

function navigation() {
  if (window.width <= 480) {
    document.getElementById("sidebar").style.display = "none";
  }
}

关于html - 左侧栏响应问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48315255/

相关文章:

javascript - 将 HTML 输入值作为 JavaScript 函数参数传递

javascript - Ipad 上的 jQuery 鼠标悬停

node.js - 在 Windows 上的 Symfony 2 项目中编译 Bootstrap 3

php - 将 JS 链接到 wordpress

javascript - 如何将 "Sign Up"按钮重定向到另一个页面?通过 &lt;script&gt; block 或内联向按钮添加 href 失败

twitter-bootstrap - twitter bootstrap 覆盖和自定义样式

javascript - 重复设置 translate3d(10px,0,0) 并不是重复向右移动 div。如何让它发挥作用?

html - Bootstrap 行间距问题

jquery - 监视器显示设置的边距动画问题

javascript - jQuery 自定义 slider 无法按预期工作