Wie löse ich eine Quasar Q-Karte aus der Mitte?

Question

Ich habe versucht, die obere Box von der Mitte zu trennen und die Gegenstände in der unteren Box gleichmäßig zu verteilen. Aber wenn ich hinzufüge, sind die linken und rechten Satteltaschengrößen nicht gleich. Unten ist der Code. Wenn Sie ihn in Codepen eingeben, werden Sie feststellen, dass die Karten nicht gleichmäßig aufgeteilt sind. Wie kann ich dieses Problem lösen?

<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）即可。