隱藏元素（螞蟻設計網格）

Question

我想隱藏一些div當它擊中某些斷點，在引導V4有一樣的東西：hidden-sm-down

閱讀網格文件後，設置<Col xs={0}></Col>可能是解決方案

這裏是我的例子：http://codepen.io/kossel/pen/BQgzNg?editors=0110

但是隻有xs={0}預計將隱藏在XS視圖側邊欄，但它在每一個屏幕尺寸隱藏，該解決方案/黑客是把再添斷點像sm={1}，使工作作爲expecte d。

這樣做的正確方法是什麼？

Answer 1

我應該回應我自己的問題。這不是一個錯誤，它是預期的設計。

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

「隱藏元素時XS」的理念大小實際上是一個反圖案的響應式設計。這個想法應該是「show when sm size」

我們應該記住「移動第一」，這意味着，我們應該默認隱藏菜單（因爲它應該隱藏移動），然後顯示它根據屏幕尺寸。

.sidebar { display: none; } 然後做

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

但如果我們真正需要的東西很方便，我也添加到了我的mixin.less

@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將CSS與其組件的生成的className值一起使用。由於除了顯示和隱藏組件之外，您還沒有真正使用網格，所以我建議使用媒體查詢創建自己的類，然後通過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

您可以在小於或CSS文件中定義了類似的東西，並將其導入到你的陣營組成部分。您可以使用LESS訪問@ screen-sm-max變量。像這樣：

@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

我沒有看到任何現有的實用程序組件或類，您可以重新使用像引導程序中。