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

Question

我需要一些帮助来隐藏所有小于桌面和更大的设备上的文本.我正在使用Bootstrap 3.1.0.我正在使用的代码在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;
}