Bootstrap v4で** **とhidden ** **が表示されない

Question

Bootstrap v3では、さまざまな画面幅で複数列のレイアウトを制御するために、clearfixと組み合わされたhidden - **クラスを使用することがよくあります。たとえば、

複数のhidden-**を1つのDIVに組み合わせて、複数の列を異なる画面幅で正しく表示させることができます。

例として、製品写真の行を表示する場合は、大きい画面サイズでは1行につき4個、小さい画面では3個、非常に小さな画面では2個を表示したいとします。製品写真は高さが異なる場合がありますので、行が正しく分割されるようにするにはclearfixが必要です。ここで

は

http://jsbin.com/tosebayode/edit?html,css,output

今

そのV4は、これらのクラスを離れて行っている... V3の例だと、目に見える/隠されたとそれらを置き換える - ** - 私がように見えるアップ/ダウンのクラス代わりに複数のDIVで同じことをしなければなりません。

はここだから私は同じことを達成するために、アップ/ダウンのクラスの多くと、複数のdivを追加することに単一のDIVから行ってきた... V4に

http://jsbin.com/sagowihowa/edit?html,css,output

同様の例です。 ...

<div class="clearfix visible-xs-block visible-sm-block"></div> 

に...

<div class="clearfix hidden-sm-up"></div> 
<div class="clearfix hidden-md-up hidden-xs-down"></div> 
<div class="clearfix hidden-md-down"></div> 

から

は、私が見落としているV4でこれを行うための良い方法はありますか？

Answer 1

ブートストラップ4用の更新プログラム（2018）

hidden-*とvisible-*クラスはもはや、ブートストラップ4で使用し存在しませんそれに応じてd-*のクラスが表示されます。 より大きいブレークポイントで上書きされない限り、xsがデフォルトの（暗黙の）ブレークポイントであることを覚えておいてください。= d-none

• hidden-xs-down = d-none d-sm-block
• hidden-sm-down = d-none d-md-block
• hidden-md-down = d-none d-lg-block
• hidden-lg-down = d-none d-xl-block
• hidden-xl-down（hiddenと同じ）
• hidden-xs-up = d-none = d-xl-none
• hidden-xs
• hidden-sm-up = d-sm-none
• hidden-md-up = d-md-none
• hidden-lg-up = d-lg-none
• hidden-xl-up（hiddenと同じ）（のみ）= d-none d-sm-block（hidden-xs-downと同じ）
• hidden-sm（のみ）= d-block d-sm-none d-md-block
• hidden-md（のみ）= d-block d-md-none d-lg-block
• hidden-lg（のみ）= d-block d-lg-none d-xl-block
• hidden-xl（のみ）= d-block d-xl-none
• visible-xs（のみ）= d-block d-sm-none
• visible-sm（のみ）= d-none d-sm-block d-md-none
• visible-md（のみ）= d-none d-md-block d-lg-none
• visible-lg（のみ）=また
• visible-xl（のみ）= d-none d-xl-block

Demo of this responsive display classes in Bootstrap 4

、d-*-blockがd-*-inlineで置き換えることができること音符、d-*-flex、d-*-table-cell、d-*-tableなど。統制する要素の表示タイプに依存します。 display classes

Answer 2

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

あなたは今では

.hidden-xs-down 

として隠されているもののサイズはXSと小さいからanythinging非表示になります定義する必要があり、唯一の

.hidden-xs-up 

はすべてを非表示になりますXS

Answer 3

私は複数のdivのi良い解決策です。

私はまた、あなたが（同じメディアクエリに作用するか.hidden-sm-downと.hidden-lg-up）.hidden-xs-downと.hidden-md-upで.visible-sm-blockを置き換えることができると思います。

.visible-sm-block { 
    display: none !important; 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    .visible-sm-block { 
    display: block !important; 
    } 
} 

.hidden-sm-downと.hidden-lg-upにコンパイル：どちらの状況は同じに行動しなければならない

@media (max-width: 768px) { 
    .hidden-xs-down { 
    display: none !important; 
    } 
} 
@media (min-width: 991px) { 
    .hidden-lg-up { 
    display: none !important; 
    } 
} 

hidden-sm-upはにコンパイルされます。

.visible-sm-blockと.visible-lg-blockを交換すると状況が変わることがあります。v4のドキュメントはあなたを教えてブートストラップ：

これらのクラスは 要素の可視性は、単一の連続した範囲のビューポートのブレークポイントのサイズの として表現することはできませんあまり一般的なケースに対応しようとしないでください。そのような場合はカスタムCSS を使用する必要があります。

.visible-sm-and-lg { 
    display: none !important; 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    .visible-sm-and-lg { 
    display: block !important; 
    } 
} 
@media (min-width: 1200px) { 
    .visible-sm-and-lg { 
    display: block !important; 
    } 
} 

Answer 4

残念ながら、すべてのクラスhidden-*-upとhidden-*-downは（ブートストラップバージョン4ベータ、バージョン4アルファとバージョンにこれらのクラスはまだ存在していたのと）ブートストラップから削除されました。ここに述べたように

代わりに、新しいクラスd-*は、使用する必要があります：https://getbootstrap.com/docs/4.0/migration/#utilities

私は新しいアプローチは、いくつかの状況下ではあまり有用であることが分かりました。新しいアプローチがSHOW要素である間、古いアプローチはにありました。要素です。ブロック、インライン、インラインブロック、テーブルなどの要素が表示されているかどうかを知る必要があるため、CSSで要素を表示するのは簡単ではありません。

Bootsrapから知られていた以前の "hidden- *ブートストラップ3に含まれるが、それらは同様に有用であり、自明である必要がありませんでしたhidden-unless-*

/*\ 
* Restore Bootstrap 3 "hidden" utility classes. 
\*/ 

/* Breakpoint XS */ 
@media (max-width: 575px) 
{ 
    .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, 
    .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl 
    { 
     display: none !important; 
    } 

} 

/* Breakpoint SM */ 
@media (min-width: 576px) and (max-width: 767px) 
{ 
    .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, 
    .hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl 
    { 
     display: none !important; 
    } 
} 

/* Breakpoint MD */ 
@media (min-width: 768px) and (max-width: 991px) 
{ 
    .hidden-md-down, .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl 
    { 
     display: none !important; 
    } 
} 

/* Breakpoint LG */ 
@media (min-width: 992px) and (max-width: 1199px) 
{ 
    .hidden-lg-down, .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl 
    { 
     display: none !important; 
    } 
} 

/* Breakpoint XL */ 
@media (min-width: 1200px) 
{ 
    .hidden-xl-down, 
    .hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up, 
    .hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg 
    { 
     display: none !important; 
    } 
} 

クラス：このCSSで3。あなたはブートストラップ4内の特定の階層やブレークポイントの要素を非表示にする場合

Answer 5

ユーザKlaroは、古い可視性クラスを復元​​することを提案しました。これは良い考えです。残念ながら、彼らのソリューションは私のプロジェクトでは機能しませんでした。

ユーザーが個別に定義できるすべてのブレークポイントをカバーしているため、ブートストラップの古いミックスインを復元することをお勧めします。ここで

コードです：

/*! 
* Bootstrap v4.0.0-beta (https://getbootstrap.com) 
* Copyright 2011-2017 The Bootstrap Authors 
* Copyright 2011-2017 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*/ 

@import "functions"; 
@import "variables"; 
@import "mixins"; 
@import "custom"; // <-- my custom file for overwriting default vars and adding the snippet from above 
@import "print"; 
@import "reboot"; 
[..] 

Answer 6

残念ながら、これらの新しいブートストラップ：私の場合は

// Restore Bootstrap 3 "hidden" utility classes. 
@each $bp in map-keys($grid-breakpoints) { 
    .hidden-#{$bp}-up { 
    @include media-breakpoint-up($bp) { 
     display: none !important; 
    } 
    } 
    .hidden-#{$bp}-down { 
    @include media-breakpoint-down($bp) { 
     display: none !important; 
    } 
    } 
    .hidden-#{$bp}-only{ 
    @include media-breakpoint-only($bp){ 
     display:none !important; 
    } 
    } 
} 

、私はbootstrap.scssで、この時点で含まれている_custom.scssファイルにこの部分が挿入されています4つのクラスは、collapseを使用してdivの古いものと同じように動作しません。blockに目に見えるdivを設定します。これは隠されていないものから表示され、collapse機能はもはや機能しません。