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

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

由于鼠标不是（通常）在较小的设备上用于悬停，所以我不想让<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;} 
}

来源

2016-12-27 Lee

您可能需要设置一个默认样式span（以及可能的锚和其他元素）。 “默认”是移动设备。例如，您的媒体查询外：

a.more_info_news span { 
    display:none; 
}

来源

2016-12-27 22:57:37 MrWhite

谢谢！这很好用！但是，就我的理解而言，这是如何工作的？我知道它做了什么，但是，在**（和外部）媒体查询之后放置它**，它仍然显示大于992px的任何内容。 – Lee

总之，“[特异性]（https://www.google.co.uk/search?q=css+specificity）”。媒体查询中的样式会覆盖外部定义的样式（_specificity_少）。就我个人而言，我仍然会首先包含默认样式 - 因为这似乎更符合逻辑顺序。稍后定义的样式只会覆盖相同或较少特定的样式（_cascade_）。 – MrWhite

啊，当然。我从来没有想过这一点。（顺便说一句，我先移动默认。）再次感谢！ – Lee

有建于CSS类的引导，做同样的事情在由w3dk答案的CSS。

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

然而，在引导的阿尔法V4有一个.hidden-md-down -class，会做你要找的确切的事情。来自阿尔法例子：

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

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

来源

2016-12-28 05:21:59

当你使用引导，所以你并不需要@media 你只需要使用.hidden-xs类隐藏在超小型设备的div像移动

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

来源

2016-12-28 05:54:04

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

回答

相关问题