如何將夸克（Quasar）Q卡從中心分離？

Question

我試著將上部盒子與中心分開，並使下部盒子中的項目均勻分佈。但是當我新增 時，左側和右側邊箱尺寸不相等。下面是程式碼，如果你把它放在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優秀的佈局系統來實現這一點。

首先，你必須均勻地分配你的小組。
將類別 col-6 套用到由 分隔的部分（組 1、組 2）。

然後，只需將 col 類別套用到第 2 組子部分（A、B）即可。

#