Vue.js：无法使用带有 CSS 媒体查询的侧边栏隐藏 div

Posted 2023-02-23

【中文标题】Vue.js：无法使用带有 CSS 媒体查询的侧边栏隐藏 div

【英文标题】：Vue.js: Cannot hide a div with a sidebar with CSS media queries

【发布时间】：2018-08-05 15:47:02

【问题描述】：

我试图用这个方法用我的侧边栏隐藏一个 div：

/* For mobile phones: */
@media (max-width: 576px) 
 .sidebar 
  display: none!important;
 


/* For tablets */
@media (max-width: 768px) 
 .sidebar 
  display: none!important;
 

侧边栏会听取这些规则，但内容似乎正在消失，但 <div> 实际上仍然存在。可能是这样的，因为带有侧边栏的<div> 实际上是一个组件。但是我不知道如何解决它。

我的页面：

<template>
 <div>
  <sidebar />
  <main-content/>
 </div>
</template>

侧边栏组件：

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <!--<li><a href="#">Home</a></li>-->
      <!--<li><a href="#">Popular</a></li>-->
      <!--<li><a href="#">News and events</a></li>-->
      <!--<li><a href="#">Pages</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <!--<li><a href="#">Organisation</a></li>-->
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

【问题讨论】：

是 css 范围的吗？ css 放置在哪个组件中？

CSS 在我的页面的其他部分完美运行。我把它放在 assets 文件夹中，并将它导入到我的 app.vue 文件中，这是主要的。

【参考方案1】：

问题在于具有主要内容的容器的 CSS。它有左边距，所以当侧边栏消失时，它停留在同一个地方，不占用被移除侧边栏的宽度。

【参考方案2】：

您的组件样式很可能是scoped。查看documentation 的工作原理。

---

一个可行的解决方案是将样式块移动到组件本身：

<template>
<div class="sidebar">
    <div class="sidebar-header">
      <div class="logo"><img src="../../../components/img/logo.svg"/></div>
      <a href="#" id="title">System</a>
    </div>
    <ul class="sidebar-nav">
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/users.svg" />Users</a>
            <ul>
              <li class="nav-item"><a href="#">Import</a></li>
              <li class="nav-item"><a href="#">Invitation</a></li>
            </ul>
      </li>
      <li class="nav-item">
          <a href="#"><img class="nav-icon" src="../../../components/img/polls.svg" />Poll</a>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* For mobile phones: */
@media (max-width: 576px) 
 .sidebar 
  display: none !important;
 


/* For tablets */
@media (max-width: 768px) 
 .sidebar 
  display: none !important;
 

</stlyle>

另一种解决方案是声明一个非 scoped style 块，这通常放在您的 App.vue 文件中。