【发布时间】：2019-08-18 22:32:45
【问题描述】：
我想让我网站上的侧边栏只在大屏幕设备上可见，并在中小型设备中默认隐藏并制作一个按钮来显示它，我想要这个网站的相同行为：@987654321 @
我已经编写了这段代码：
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"
>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
CSS：
<style scoped>
.main-container {
display: flex;
align-items: stretch;
min-height: 100vh;
}
h1 {
text-decoration: underline #3a3939;
}
#background {
background: url("./imgs/80911.jpg");
background-size: cover;
}
h2 > i {
cursor: pointer;
}
.side-panel {
position: fixed;
height: 100vh;
width: 25%;
}
ul {
list-style: none;
}
li:hover {
background-color: #eeeeee !important;
color: #02131f !important;
}
i:hover {
color: #ffffff;
}
.bg-golden {
background-color: #02131f;
}
.content {
width: 100%;
margin-left: 25%;
}
@media (max-width: 540px) {
.main-container {
display: block;
flex-wrap: wrap;
}
.content {
width: 100%;
margin-left: 0;
}
.side-panel {
position: static;
width: 100%;
min-height: 250px;
height: auto;
}
#footer {
display: none;
}
}
</style>
谁能帮我改一下代码和成就
【问题讨论】：
-
你尝试了什么？如果您只有一个人为您制作，没有人会帮助您...首先，我建议您使用 css 的转换属性和您已经使用过的@media
-
我其实不知道怎么做，我还在学习@MikelFerreiro
-
您是否尝试过首先研究 @media 和 css 中的转换？
-
您可能会发现 link 对于学习如何做出这种行为非常有用。试试看，如果你有任何问题，我们会帮助你@AymanTarig
标签： javascript html css flexbox bootstrap-4