Bootstrap 类似 Quasar 中的容器？

Question

Quasar 网站声明：

When using Quasar, you won’t need additional heavy libraries like [...] Bootstrap. It’s got those needs covered internally, and all with a small footprint!

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

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

Answer 1

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

这是我受Bootstrap启发制作的class，把这个放在你的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

然后使用class

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

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

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

检查 css + html 演示 here

Answer 2

这里是使用quasar断点变量的版本

// Uncomment to override the default breakpoints
//$breakpoint-xs: 599px
//$breakpoint-sm: 1023px
//$breakpoint-md: 1439px
//$breakpoint-lg: 1919px

@import '~quasar/src/css/variables';

$container-padding: 20px;

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

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

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

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

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

Bootstrap 类似 Quasar 中的容器？

Bootstrap-like container in Quasar?

twitter-bootstrap

vue.js

quasar-framework