15

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

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

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

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

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

4

2 回答 2

10

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

阅读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;
}
于 2017-04-21T18:52:03.673 回答
1

我认为您可能已经发现了一个错误 - 或者至少需要指定多个断点跨度以获得预期结果。不过，这似乎是隐藏网格列的有效方法。

Antd 使用 CSS 和 React 并为其组件生成 className 值。由于除了显示和隐藏组件之外，您并没有真正使用网格，因此我建议您使用媒体查询创建自己的类，然后通过 className 属性将它们添加到您的组件中。

这是 Form.Item 组件的代码示例。

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout();
  }
}

https://github.com/ant-design/ant-design/blob/6b8eeb79d11a53df3ff47bc525d0b7db714a8a2c/components/form/style/index.less#L274

您可以在 LESS 或 CSS 文件中定义类似的内容并将其导入您的 React 组件。您可以使用 LESS 访问 @screen-sm-max 变量。像这样：

@import "~antd/lib/style/themes/default.less"

@media (min-width: @screen-sm-min) {
  .class-name-to-show-mobile-hide-desktop {
    display: none;
  }
}
@media (max-width: @screen-sm) {
  .class-name-to-show-desktop-hide-mobile {
    display: none;
  }
}

另请参阅此处有关自定义主题变量的注释。https://ant.design/docs/react/customize-theme

我没有看到任何现有的实用程序组件或类，您可以像在引导程序中那样重用它们。

于 2017-04-21T06:15:11.657 回答