Bagaimana untuk menanggalkan kad Quasar Q dari pusat?

Question

Saya cuba asingkan kotak atas dari tengah dan jadikan barang dalam kotak bawah sama rata. Tetapi apabila saya menambah saiz beg pelana kiri dan kanan tidak sama. Di bawah adalah kod, jika anda memasukkannya ke dalam codepen anda akan melihat bahawa kad tidak dibahagikan sama rata. Bagaimanakah saya boleh menyelesaikan masalah ini?

<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

Anda boleh mencapai ini menggunakan sistem susun atur Quasar yang sangat baik.

Pertama, anda perlu mengagihkan kumpulan anda secara merata.
Bahagian yang memisahkan kelas col-6 应用于由 (Kumpulan 1, Kumpulan 2).

Kemudian hanya gunakan kelas col ke set ke-2 subbahagian (A,B).