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

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) {&nbsp; .side-panel {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; display: none;&nbsp; }}