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

问题描述

当它达到某些断点时，我想隐藏一些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文档之后，设置<Col xs={0}></Col>可能是解决方案

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视图中隐藏侧边栏，但是在所有屏幕尺寸下都隐藏了侧边栏，解决方案/技巧是添加另一个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.

正确的方法是什么?

推荐答案

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

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

在阅读 https://github.com/roylee0704/react-flexbox-之后， grid/issues/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.

.sidebar {display: none;}然后做

.sidebar {display: none;}and then do

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

但是如果我们真的需要一些方便的东西，我也把它添加到了我的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设计网格)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！