Question

我需要一些帮助来隐藏小于桌面和更大的所有设备上的文本。我正在使用Bootstrap 3.1.0。我正在使用的代码是on CodePen.

由于鼠标不是（通常）在较小的设备上使用来悬停，我不希望<span>中的文字显示，只是链接。当我使用@media(min-width: 992px)时，它在桌面上工作正常，但在较小的设备上，<span>中的文本显示在较小的设备上而不是链接上。知道什么是错的吗？

HTML：

<ul>
<li><a href="/analysis/the-real-goal-of-the-meeting.php" class="more_info_news">
<span><strong>Summary:</strong> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Uterque enim summo bono fruitur, id est voluptate.
Ita ne hoc quidem modo paria peccata sunt.</span>The Real Goal of the Meeting</a></li>
</ul>

CSS：

@media(min-width: 992px) {
    a.more_info_news {position:relative;z-index:24;color:#0F0FB6;text-decoration:none;}
    a.more_info_news:hover {z-index:25;background-color:#fff;}
    a.more_info_news span {display:none;font-size:small;text-decoration:none;}
    a.more_info_news:hover span {display:block;position:absolute;top:35px;width:350px;border:1px solid #000;background-color:#EDE9D3;color:#000;left:10px;visibility:visible;padding:5px;}
}

Answer 1

您可能需要为span（可能还有锚点和其他元素）设置默认样式。 “默认”是移动设备。例如，在媒体查询之外：

a.more_info_news span {
    display:none;
}

Answer 2

在Bootstrap中有内置的CSS类，与w3dk的答案中的CSS完全相同。

如果您打算继续使用Bootstrap 3.1.0;使用visible和/或hidden类，如：http://getbootstrap.com/css/#responsive-utilities

然而，在Alpha of Bootstrap v4中有一个.hidden-md-down - 类可以完成您正在寻找的东西。 alpha中的示例：

`@media (max-width: 991px) {
   .hidden-md-down {
    display: none !important;
  }
}`

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Answer 3

当您使用Bootstrap时，您不需要@media 您只需使用.hidden-xs类来隐藏超小型设备（如移动设备）中的div

<div class="hidden-xs">
.
.
.
</div>

使用Bootstrap 3.1.0隐藏小型设备上的div

3 个答案: