Quasar 中类似 Bootstrap 的容器？

Question

类星体网站指出：

\n\n

\n

使用 Quasar 时，您\xe2\x80\x99 不需要额外的重型库，例如 [...] Bootstrap。它\xe2\x80\x99s 在内部满足了这些需求，而且占用空间很小！

\n

\n\n

但是，我不知道如何在 Quasar 中实现类似 Bootstrap 容器的行为。我在这里遇到了这个示例，它显然使用了像 bootstrap 这样的行和列，但周围没有任何自动调整大小的容器元素。

\n\n

Quasar 中不存在该容器吗？不推荐吗？或者我只是没有看对地方？

\n

Answer 1

我面临着同样的问题。我不认为 Quasar 有这个功能，我最终不得不为容器创建自定义 CSS。

这是我受 Bootstrap 启发而制作的课程，将其放在您的app.scss(或app.css)

// breakpoint variable, from https://quasar.dev/style/breakpoints
// Except the xs one because I think 600px is too small
$xs-breakpoint: 718px;
$sm-breakpoint: 1024px;
$md-breakpoint: 1439px;
$lg-breakpoint: 1920px;

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: $xs-breakpoint) {
  .container,
  .container-sm {
    max-width: 540px;
  }
}

@media (min-width: $sm-breakpoint) {
  .container,
  .container-sm,
  .container-md {
    max-width: 920px;
  }
}

@media (min-width: $md-breakpoint) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 1140px;
  }
}

@media (min-width: $lg-breakpoint) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1440px;
  }
}

如果使用，只需删除该变量并直接.css将断点值放在@media min-width

然后使用该类

<q-page class="container">
    Boo!
</q-page>

我还为不同的断点制作了容器类。当我有包含不同类型内容的不同页面时，我发现这很有用。如果您只需要一种类型的容器，则可以删除特定断点的其他容器类。

当然，您可以根据max-width自己的喜好调整每个断点（甚至是断点值，但我不会推荐这样做）。

在这里查看 css + html 演示