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（そしておそらくアンカーおよび他の要素）のデフォルトのスタイルを設定する必要があります。 「デフォルト」はモバイルデバイスです。たとえば、メディアクエリの外側に：

a.more_info_news span { 
    display:none; 
} 

Answer 2

ブートストラップには、w3dkの回答のCSSと同じことを行うCSSクラスが組み込まれています。

ブートストラップ3.1.0を引き続き使用する予定の場合は、しかし、ブートストラップV4のアルファであなたが探していた正確なことをするだろう.hidden-md-down級があるhttp://getbootstrap.com/css/#responsive-utilities

：そうのようなvisibleおよび/またはhiddenクラスを使用します。アルファから 例：

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

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

Answer 3

あなたはブートストラップを使用している場合ので、あなたは、あなただけのモバイル

のような余分な小型デバイスでのdivを非表示にする .hidden-xsクラスを使用する必要が @media必要はありませんでした

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