使用antd隐藏元素(Ant设计网格)

Question

我想在遇到某些断点时隐藏一些div,在bootstrap v4中有类似的东西: hidden-sm-down

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

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

不过预期只会xs={0}隐藏侧边栏在XS视图,但它隐藏在每个屏幕大小,解决方案/黑客是添加另一个断点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;
}