使用 antd 隐藏元素（Ant Design Grid）

我想在遇到某些断点时隐藏一些 div，在 bootstrap v4 中有类似的内容：hidden-sm-down

阅读 Grid 文档后，设置<Col xs={0}></Col>可能是解决方案

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

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

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

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

看完之后https://github.com/roylee0704/react-flexbox-grid/issues/13 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;
}