Comment détacher une carte Quasar Q du centre ?

Question

J'ai essayé de séparer la boîte supérieure du centre et de répartir uniformément les éléments de la boîte inférieure. Mais quand j'ajoute les tailles des sacoches gauche et droite ne sont pas égales. Ci-dessous se trouve le code, si vous le mettez dans codepen, vous verrez que les cartes ne sont pas réparties également. Comment puis-je résoudre ce problème?

<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

Vous pouvez y parvenir en utilisant l'excellent système de mise en page de Quasar.

Tout d’abord, vous devez répartir vos groupes de manière égale.
Pièces qui séparent les classes col-6 应用于由 (Groupe 1, Groupe 2).

Ensuite, appliquez simplement la classe col au 2ème ensemble de sous-parties (A,B).