时间戳

首页 > 解决方案 > Quasar 中的类似 Bootstrap 的容器？

twitter-bootstrap - Quasar 中的类似 Bootstrap 的容器？

问题描述

Quasar 网站指出：

使用 Quasar 时，您不需要像 [...] Bootstrap 这样的繁重库。它在内部满足了这些需求，而且占用空间小！

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

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

标签： twitter-bootstrapvue.jsquasar-framework

解决方案

我面临着同样的问题。我不认为 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 演示

推荐阅读