使用 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 主题上运行。
最佳答案
您可以使用不带任何类的简单 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>
关于css - Quasar 框架 Flex 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50301515/