隠す要素（Antのデザイングリッド）

Question

は、ブートストラップV4でのようなものがあります：hidden-sm-down

は<Col xs={0}></Col>が解決策になるかもしれ設定、グリッドのマニュアルを読んだ後

ここ

私の例である：http://codepen.io/kossel/pen/BQgzNg?editors=0110

は、しかし唯一xs={0}はXSビューでサイドバーを隠すだろうが、それはすべての画面サイズに隠されたと予想される、解決策/ハックはそれを動作させるためにsm={1}のような別のブレークポイントを追加配置することです期待通りd。

これを行う正しい方法は何ですか？

Answer 1

私自身の質問に答える必要があります。それはバグではなく、意図した設計です。

https://github.com/roylee0704/react-flexbox-grid/issues/13

「XSに非表示要素」のサイズは、実際に応答設計のための抗パターであるという考えを読んだ後。 "は、sm以上のサイズを表示するときに表示する"

"モバイルファースト"は、デフォルトでメニューを非表示にする必要があることを覚えておく必要があります。それは画面サイズに応じて。

.sidebar { display: none; } 、その後は

<Col sm={4}></Col>

んが、私たちは本当に便利なものが必要な場合、また、私はこれはまだ可能だとは思わない

@media (min-width: @screen-sm-min) { 
    .visible-sm  { display: block !important; } 
    .row.visible-sm { display: flex !important; 
    display: -webkit-flex !important; 
    display: -ms-flexbox !important; 
    display: -webkit-box !important; 
    display: flex!important; } 
    table.visible-sm { display: table !important; } 
    tr.visible-sm { display: table-row !important; } 
    th.visible-sm, 
    td.visible-sm { display: table-cell !important; } 
    .flex-column-sm {flex-direction: column; } 
} 
@media (min-width: @screen-md-min) { 
    .visible-md  { display: block !important; } 
    .row.visible-md { display: flex !important; 
    display: -webkit-flex !important; 
    display: -ms-flexbox !important; 
    display: -webkit-box !important; 
    display: flex!important; } 
    table.visible-md { display: table !important; } 
    tr.visible-md { display: table-row !important; } 
    th.visible-md, 
    td.visible-md { display: table-cell !important; } 
    .flex-column-md {flex-direction: column; } 
} 
@media (min-width: @screen-lg-min) { 
    .visible-lg  { display: block !important; } 
    .row.visible-lg { display: flex !important; 
    display: -webkit-flex !important; 
    display: -ms-flexbox !important; 
    display: -webkit-box !important; 
    display: flex!important; } 
    table.visible-lg { display: table !important; } 
    tr.visible-lg { display: table-row !important; } 
    th.visible-lg, 
    td.visible-lg { display: table-cell !important; } 
    .flex-column-lg {flex-direction: column; } 
} 
@media (min-width: @screen-xl-min) { 
    .visible-xl  { display: block !important; } 
    .row.visible-xl { display: flex !important; 
    display: -webkit-flex !important; 
    display: -ms-flexbox !important; 
    display: -webkit-box !important; 
    display: flex!important; } 
    table.visible-xl { display: table !important; } 
    tr.visible-xl { display: table-row !important; } 
    th.visible-xl, 
    td.visible-xl { display: table-cell !important; } 
    .flex-column-xl {flex-direction: column; } 
} 

@media (min-width: @screen-md-min) { .hidden-md { display: none !important; } } 
@media (min-width: @screen-lg-min) { .hidden-lg { display: none !important; } } 
@media (min-width: @screen-xl-min) { .hidden-xl { display: none !important; } } 
/** utilities **/ 

.center-block { 
    margin-right: auto !important; 
    margin-left: auto !important; 
    display:block; 
} 

Answer 2

私はあなたがバグを見つけたかもしれないと思うかもしれません - または少なくとも期待される結果を得るために複数のブレークポイントスパンを指定する必要があります。それはグリッドの列を非表示にする有効な方法です。

Antdは、コンポーネントに対して生成されたclassName値でReactとともにCSSを使用します。コンポーネントの表示と非表示以外のグリッドを実際に使用しているわけではないので、メディアクエリを使用して独自のクラスを作成し、className propを使用してコンポーネントに追加することをお勧めします。

次は、Form.Itemコンポーネントのコードの例です。

@media (max-width: @screen-sm-max) { 
    .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label { 
    .make-vertical-layout(); 
    } 
} 

https://github.com/ant-design/ant-design/blob/6b8eeb79d11a53df3ff47bc525d0b7db714a8a2c/components/form/style/index.less#L274

あなたは、LESSやCSSファイルにそのような何かを定義し、あなたのリアクトコンポーネントにインポートすることができます。 @ screen-sm-max変数にアクセスするためにLESSを使用することができます。このように：

@import "~antd/lib/style/themes/default.less" 

@media (min-width: @screen-sm-min) { 
    .class-name-to-show-mobile-hide-desktop { 
    display: none; 
    } 
} 
@media (max-width: @screen-sm) { 
    .class-name-to-show-desktop-hide-mobile { 
    display: none; 
    } 
} 

テーマ変数のカスタマイズについては、こちらのノートを参照してください。 https://ant.design/docs/react/customize-theme

ブートストラップのように再利用できる既存のユーティリティコンポーネントやクラスはありませんでした。