隐藏桌面浏览器上的按钮,仅显示在移动设备上

Question

我有带按钮的bootstrap标题导航栏.我想要做的是添加只在移动设备和小屏幕上可见的按钮 - 手机/平板电脑.

这是标题的结构

<header>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" >
                <li><a href="">Button 1</a></li>
                <li><a href="">Button 2</a></li>
                <li><a href="">Button 3</a></li>
                <li><a href="">BUTTON 4</a></li>
            </ul>
        </div>
    </nav>
</header>

我想BUTTON 4只在小屏幕上显示.所以我按下这样的按钮:

<li class="not_visible"><a href="">BUTTON 4</a></li>

然后在CSS中我添加

.not_visible {
    display: none;
}
@media  (max-width: 767px) {
    .header{
        text-align : center;
    }

    .not_visible {
        display: inline;
    }                                                                                                                          

   .nav{
        margin-top : 30px;
   }
}

但是在每个屏幕分辨率上都可见.似乎display: none;不起作用.

Answer 1

由于您使用的是bootstrap,因此可以对它们使用visible-xs类:

<li class="visible-xs"><a href="">BUTTON 4</a></li>

现在,它将在xs-devices中可见并隐藏在其他设备中.