QUASAR - 对齐中心和屏幕断点答案

【问题标题】：QUASAR - Justify-center and screen breakpointsQUASAR - 对齐中心和屏幕断点
【发布时间】：2018-09-15 05:55:02
【问题描述】：

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

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

所以我尝试将其用作justify-sm-center 和justify-lg-end，但未能成功。我做了这个小提琴来演示它：

<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 类）

【问题讨论】：

你启用 cssAddon (quasar.conf > framework > cssAddon: true) 了吗？

标签： vue.js quasar-framework

【解决方案1】：

我认为断点不适用于行（仅行内的项目），所以我认为要执行您想要的操作，您必须使用带有 breakpoints 或 platform detection 的 Vue 类绑定。比如：

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

【讨论】：

【解决方案2】：

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

main.js/ts

import ...

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

createApp...

【讨论】：