左侧酒吧响应问题

时间:2018-01-18 06:42:06

标签: html5 twitter-bootstrap css3

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

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

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

如果您只想隐藏它,请使用:

@media(max-width: 420px) {
    #sidebar {
        display: none;
    }
}