Html 让Div在手机上消失

Html 让Div在手机上消失,html,css,Html,Css,我有一个导航栏,可以启动Teamspeak和Gary的Mod,但我希望它在移动设备上消失。有人能帮我吗 HTML 如果您使用的是引导,则可以使用以下类: hidden-xs 或/及 hidden-sm 这个类基本上是一个媒体查询,一种运行CSS的条件查询。在本例中,当屏幕小于767px时,隐藏的xs类将显示为:none @media (max-width: 767px) { .hidden-xs { display: none !important; } } 在这种情况

我有一个导航栏,可以启动Teamspeak和Gary的Mod,但我希望它在移动设备上消失。有人能帮我吗

HTML

如果您使用的是引导,则可以使用以下类:

hidden-xs 
或/及

hidden-sm 
这个类基本上是一个媒体查询,一种运行CSS的条件查询。在本例中,当屏幕小于767px时,隐藏的xs类将显示为:none

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
在这种情况下,Bootstrap有很多类可以提供帮助,有很多宽度的屏幕可以使用


[MDN-媒体查询-CSS]

你的意思是这样的吗

<style>
        header.main_nav {
        padding: 1% 0;
        display: block;
    }

    .logo {
        margin: 3% auto;
        text-align: center;
    }

    .logo a {
        font-size: 3vw;
        color: #fff;
        text-decoration: none;
        border: 3px solid #fff;
        border-radius: 15px;
        text-transform: uppercase;
        padding: 2px 10px 0 10px;
        margin: 0;
    }

    .logo a:hover {
        background-color: #fff;
        color: #000000;
    }

    @media ( max-width : 400px) {
        ul li.disappear a {
            display: none;
        }
    }

</style>

如果你看一下bootstrap的斯多葛学派,你会发现他们在CSS中使用了一种叫做媒体查询的东西,你可以使用媒体查询使用CSS@media querys参考:当我尝试它时,它对我起了作用,你能展示一幅你希望输出是什么样子的图片吗。。
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
<style>
        header.main_nav {
        padding: 1% 0;
        display: block;
    }

    .logo {
        margin: 3% auto;
        text-align: center;
    }

    .logo a {
        font-size: 3vw;
        color: #fff;
        text-decoration: none;
        border: 3px solid #fff;
        border-radius: 15px;
        text-transform: uppercase;
        padding: 2px 10px 0 10px;
        margin: 0;
    }

    .logo a:hover {
        background-color: #fff;
        color: #000000;
    }

    @media ( max-width : 400px) {
        ul li.disappear a {
            display: none;
        }
    }

</style>
<div class="navbar">
    <ul class="nav">
        <li class="nav disappear"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li>
        <li class="nav disappear"><a class="nav" href="steam://connect/158.69.123.91:27015">US Server</a></li>
        <li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li>
    </ul>
</div>