vue.js - QUASAR - 对齐中心和屏幕断点

Question

我有这个问题，我在论坛中搜索但没有找到任何相关内容。

我正在尝试将 justify-center 用于小屏幕，将 justify-end 用于大屏幕。阅读文档我发现了这个：

因此，我尝试将其用作justify-sm-center但justify-lg-end无法使其工作。我做了这个小提琴来演示它：

https://jsfiddle.net/leoprada/3b40vn6g/

<div class="row">
    <p>Class: justify-center applied when BP lg (justify-lg-center) and justify-end on BP sm (justify-sm-end) </p>
    <div class="row col-12 justify-sm-end justify-end-sm justify-lg-center bg-black">
        <div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
            col-4
        </div>
        <div class="col-4 bg-green q-py-md text-center">
            Col-4
        </div>
    </div>
</div>

我真的不知道我是否做错了什么。

（我知道如何使用 CSS 自己让它工作，但我当然更愿意使用预定义的 quasar 类）

Answer 1

我认为断点不适用于行（仅行内的项目），所以我认为要做你想做的事，你必须使用 Vue Class Bindings with breakpoints或platform detection。就像是：

<div class="row">
  <div :class="$q.platform.is.mobile ? 'justify-end' : 'justify-center'"  class="row col-12 bg-black">
    <div class="col-sm-4 col-lg-6 bg-blue q-py-md text-center">
      col-4
    </div>
  </div>
</div>

Answer 2

您需要启用 cssAddon / flex-addon。如果您没有通过其原生 CLI 安装 quasar，因此没有quasar.conf，则需要导入flex-addon.sass文件。

main.js/ts

import ...

// Import Quasar css
import "quasar/src/css/index.sass"
import "quasar/src/css/flex-addon.sass" // <--- NEW

createApp...