antd - 使用 antd(Ant Design Grid)隐藏元素

Question

我想在遇到某些断点时隐藏一些 div，在 bootstrap v4 中有类似的东西:hidden-sm-down
阅读网格文档后，设置 <Col xs={0}></Col>可能是解决方案

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

然而预计只有 xs={0}将在 XS View 中隐藏侧边栏，但它隐藏在每个屏幕尺寸，解决方案/黑客是添加另一个断点，如 sm={1}使其按预期工作。

这样做的正确方法是什么？

Answer 1

我应该回答我自己的问题。这不是错误，而是预期的设计。

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

“ 在 xs 中隐藏元素”大小的想法实际上是响应式设计的反模式。这个想法应该是“ 显示超过 sm 大小 ”

我们应该记住“移动优先”，这意味着我们应该默认隐藏菜单(因为它应该为移动设备隐藏)然后根据屏幕大小显示它。

.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;
}