在桌面浏览器上隐藏按钮并仅在移动设备上显示答案

【问题标题】：Hiding button on desktop browser and showing only on mobile devices在桌面浏览器上隐藏按钮并仅在移动设备上显示
【发布时间】：2015-09-14 08:34:53
【问题描述】：

我有带按钮的引导标题导航栏。我想做的是添加仅在移动设备和小屏幕（手机/平板电脑）上可见的按钮。

这是标题的结构

<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; 不起作用。

【问题讨论】：

不是我。我刚刚批准了一个版本，但没有看到标签。现在我再次删除了标签；）

标签： css twitter-bootstrap

【解决方案1】：

由于您使用的是引导程序，因此您可以在它们上使用 visible-xs 类：

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

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

【讨论】：

哦，这很简单。这是工作。只是一个问题 xs-devices 到底是什么？
感谢您的帮助。倒计时结束后，我会在 10 分钟内接受你的回答 :)

【解决方案2】：

按钮 4 是最好的方法，但是如果你不遵循引导程序，那么你可以简单地使用 display:inline !important;

由于页面较低的 css 具有更高的优先级，在您的情况下，我认为存在一些层次结构问题。

试试这个 dedisplay:inline !important;

【讨论】：

【解决方案3】：

可能已经晚了，但由于我注意到您正在使用引导程序，您可以使用 .d-block .d-sm-none 作为您的类，使其仅在 xs- 小型设备上可见。

Use this as a guide.

【讨论】：