使用 antd(Ant Design Grid)隐藏元素 [英] Hide element with antd (Ant Design Grid)

问题描述

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

I want to hide some divs when it hit certain breakpoints, in bootstrap v4 there is something like: hidden-sm-down

阅读Grid文档后，设置可能是解决办法

After reading the Grid documentation, setting <Col xs={0}></Col> may be the solution

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

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

However expected with only xs={0} would hide the sidebar at XS view, but it hidden at every screen size, the solution/hack is to put add another breakpoint like sm={1} to make it work as expected.

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

What is the correct way to do this?

推荐答案

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

I should have respond my own question. it's not a bug, it's the intended design.

阅读后https://github.com/roylee0704/react-flexbox-网格/问题/13

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

the idea of "Hiding element when in xs" size is actually an anti-patter for responsive design. the idea should be "show when more than sm size"

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

We should keep in mind "mobile first", which means, we should hide the menu by default (as it should be hidden for mobile) and then show it according to the screen size.

<代码>.侧边栏{显示:无；}然后做

但如果我们真的需要一些方便的东西，我也将它添加到我的 mixin.less

but if we really need something handy, I also added this to my 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;
}

这篇关于使用 antd(Ant Design Grid)隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！