css - Quasar 框架 Flex 类

Question

使用 Quasar Framework 0.15，我没有看到对使用 Flex 相关类有任何影响。一个简单的组件:

<template>
  <q-page class="flex">
    <div class="row">
      <div class="col-sm-6 justify-center">
        <q-btn-group>
          <q-btn label="1" />
          <q-btn label="2" />
          <q-btn label="3" />
        </q-btn-group>
      </div>
    </div>

  </q-page>
</template>

当我检查组件时，例如类为“行”的 div 没有预期的全宽，也没有任何其他与 Flex 相关的类，如“justify-start”或“col-sm-” 6' 似乎有效。

我的 btn-group 在这种情况下显示在屏幕的左上角，就好像没有 css 被应用到它('justify-center' 应该居中)

我在全新安装的 web/material 主题上运行。

Answer 1

您可以使用不带任何类的简单 q-page，它会占用整个宽度。您还可以使用固定的中心类来使内容居中。

<template>
  <q-page>
    <div class="row">
      <div class="col-sm-6 fixed-center">
        <q-btn-group>
          <q-btn label="1" />
          <q-btn label="2" />
          <q-btn label="3" />
        </q-btn-group>
      </div>
    </div>

  </q-page>
</template>