Quasar 框架 Flex 类

Posted 2023-03-28

【中文标题】Quasar 框架 Flex 类

【英文标题】：Quasar Framework Flex Classes

【发布时间】：2018-10-22 09:55:34

【问题描述】：

使用 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>

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

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

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

【参考方案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>