让Div在移动设备上消失

问题描述 投票:1回答:2

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

HTML

<div class="navbar">
    <ul class="nav">
        <li class="nav"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li>
        <li class="nav"><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

CSS

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;
}
html css
2个回答
2
投票

如果你使用bootstrap你可以使用该类:

hidden-xs 

和/或

hidden-sm 

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

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

Bootstrap utilities classes

在这种情况下,Bootstrap有很多类可以帮助你准备好使用很多宽屏。

[MDN - 媒体查询 - CSS]


0
投票

你的意思是这样的吗?

<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>

© www.soinside.com 2019 - 2024. All rights reserved.