使用CSS和Vue隐藏Div的问题
使用CSS和Vue隐藏Div的问题
提问于 2021-04-20 07:26:21
我试图用css隐藏一个Div，但是当我尝试这样做的时候，它对我不起作用。
到目前为止，这就是我正在尝试的
我的代码VUE
<div class="scroll-wrapper scrollbar-outer" style="position: relative;">
<div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
<div class="panel-group" id="accordion-mbl-menu">
<!-- ===Menu Desktop=== -->
<div id="app" class="large">
<b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accesorios</b-button>
<b-collapse id="collapse-1" class="mt-2">
<ul class="customHorizontalList">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</b-collapse>
</div>
<!-- ===End Menu Desktop=== -->
...
...我的代码css：
@media (min-width: 829px) {
.large {
display: block;
}
.navbar-greetings, .login-section{display: none}
#menu-header.collapse:not(.show){
display: block;
}
#menu-header{
position: fixed;
top: 25px;
max-width: 83%;
margin: 0 auto;
left: 8.32%;
.panel{
top: 50px;
display: fixed;
flex-direction: row;
button{
display: block;
color: white;
font-size: 13px;
font-family: 'VWHead-Bold';
}
}
#accordion-mbl-menu{
display: flex;
}
}
}在网上搜索，我试图找到解决方案，但到目前为止一无所获，我真的不知道我做错了什么
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-20 07:30:57
最初没有CSS来隐藏.large，所以它总是display: block。
在媒体查询前设置其初始状态：
.large {
display: none; ?
}
@media (min-width: 829px) {
.large {
display: block;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67170518
复制相关文章
相似问题
腾讯云开发者
