css - 使用 Bootstrap 3.1.0 在小型设备上隐藏 div

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(可能还有 anchor 和其他元素)设置默认样式。 “默认”是移动设备。例如，在您的媒体查询之外:

a.more_info_news span {
    display:none;
}