Bootstrap 4 beta - smのdivのみを表示するには？ブートストラップアルファ6では

Question

私だけのSMのために示していないのdivの内容を持っている、これを書くことができます：

<div class="hidden-md-up hidden-xs-down"> 
    This would only show for sm in Bootstrap 4 alpha 6. 
</div> 

これはもはやブートストラップ4ベータ版で動作します。

bootstrap 4 betaを使用してdivのコンテンツをsm専用に表示するにはどうすればよいですか？

Answer 1

あなたはdisplayのプロパティを探していると思います。

<div class="d-xl-none d-lg-none d-md-none d-sm-block d-xs-none">This would only show for sm</div> 

これはのみsmのためのdivが表示されます。

Answer 2

@styfleはdisplay propertiesを使用するのが適切でした。しかし、それはすべてのモバイル最初の心に留めておくので、xsで始まり、その後、我々は唯一のsmで表示したい場合はmd、lg ...

に上がる：

• まず私たちは望んでいません私たちはd-none（それの範囲を@media (min-width: 0px)と考えてください）でそれをドロップする必要があるので、xsにあります。
• 次にsmに入れたいのでd-sm-block（範囲：@media (min-width: 576px)）と表示してください。
• 第三に、我々はそうd-md-none（範囲：@media (min-width: 768px)）であり、それをドロップしmdでそれを持ってしたくない
• 、（第四に、これ以上必要な、d-md-noneはすでにlgとxlのための例をスコープとして。）

だから完全に我々が得る：

<div class="d-none d-sm-block d-md-none"> 
    This would only show for sm in Bootstrap 4 Beta 
</div> 

もう一つの例：
smとlgでのみ表示してください。

<div class="d-none d-sm-block d-md-none d-lg-block d-xl-none"> 
    This would only show for sm and lg in Bootstrap 4 Beta 
</div>