隐藏中小屏幕设备上的侧边栏

Question

我想使我的网站上的侧边栏仅在大屏幕设备上可见，并且在默认情况下在中小型设备上被隐藏，并使其显示一个按钮，我希望该站点具有相同的行为：https：// colorlib .com / preview / theme / elen / index.html我已经编写了以下代码：HTML：<template>  <div id="app">    <div class="main-container">      <div class="side-panel">        <div class="side-panel bg-golden h-100">          <div class="container h-100">            <div class="row h-100 pt-5 justify-content-center align-items-center">              <div class="col-12 text-center text-secondary">                <h5>AYMAN TARIG</h5>                <ul class="list-group pt-5 pb-4">                  <li class="list-group-item bg-transparent">HOME</li>                  <li class="list-group-item bg-transparent">ABOUT</li>                  <li class="list-group-item bg-transparent">ARTICLES</li>                  <li class="list-group-item bg-transparent">CONTACT</li>                </ul>                <div id="footer">                  <h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>                  <h6 class="pt-4">                    <i class="fab fa-facebook-f p-2"></i>                    <i class="fab fa-google-plus-g p-2"></i>                  </h6>                </div>              </div>            </div>          </div>        </div>      </div>      <div class="content">        <div id="background" class="h-100">          <div class="container p-5 h-100">            <div class="row h-100 justify-content-center align-items-center">              <div class="col-12">                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>                <h6                  class="text-center text-secondary pb-4"              </div>            </div>          </div>        </div>      </div>    </div>  </div></template>谁能帮我改变我的守则和成就

Answer 1

如果您正在使用针对移动设备@media (max-width: 540px)，然后添加display: none在.side-panel定义。

否则，添加一个新的媒体查询

@media (max-width: 375px) {

  .side-panel {

    position: absolute;

    display: none;

  }

}