Hide/remove 小屏幕上的列

Question

如果屏幕尺寸低于 768px，我会尝试 hide/remove 第一列。

  <div fxLayout="row" fxLayoutAlign="start stretch">
    <div fxLayout="column" fxLayoutAlign="start">
      ...
    </div>
    <div fxLayout="column" fxLayoutAlign="start">
      ...
    </div>
  </div>

我是否遗漏了一些可以使我上面的代码发生这种情况的东西？

Answer 1

您可以使用 css 样式来实现。

类似的东西：

@media screen and (max-width: 768px) {
    .row {
        .col:first-child {
            display: none;
        }
    }
}

Answer 2

我认为您需要使用 fxHide 在低于阈值大小时隐藏列。在您的情况下，它应该是 fxHide.lt-sm，其中 lt 表示小于并且 sm 表示小

  <div fxLayout="row" fxLayoutAlign="start stretch">
    <div fxLayout="column" fxLayoutAlign="start" fxHide.lt-sm>
      ...
    </div>
    <div fxLayout="column" fxLayoutAlign="start" fxHide.lt-sm>
      ...
    </div>
  </div>

Hide/remove 小屏幕上的列

Hide/remove column on smaller screens

angular-flex-layout

angular