如何將quasar q-card與中心分開？

Question

我正在嘗試將上框與中心分開，並使下框中的項目平均分布。但是當我添加<q-separater vertical></q-separater>時，左側和右側框大小不相等. 下面是代碼，如果你把它放在codepen中，你會看到卡片沒有被平均分開。 我怎樣才能解決這個問題？

<div id="q-app">
  <div class="q-pa-md">
    <div class="q-gutter-md row justify-center items-center">
      <q-card class="my-card">
        <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">Group 1</div>
              </q-card-section>
              <q-separator vertical></q-separator>
              <q-card-section>
                <div class="text-h6">Group 2</div>
              </q-card-section>
            </q-card-section>
            <q-separator></q-separator>
            <q-card-section horizontal>
              <q-card-section>
                <div class="text-h6">A</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">B</div>
              </q-card-section>
              <q-card-section>
                <div class="text-h6">C</div>
              </q-card-section>
      </q-card>
    </div>
  </div>
</div>

//script
const app = Vue.createApp({
  setup () {
    return {}
  }
})

app.use(Quasar, { config: {} })
app.mount('#q-app')

Answer 1

您可以使用 Quasar 出色的布局系統來實現這一點。

首先，您必須平均分配您的組。
將 class col-6應用於由<q-separator vertical>的部分（第 1 組、第 2 組）。

然后，只需將 class col應用到您的第 2 組子部分（A、B）。

這是一個 Codepen 。