如何让Quasar Q-Card内容居中分隔并实现宽度均分？

尝试将Q-Card上方区域的内容从中间分隔开，同时让下方区域的内容均分分布。但添加<q-separator vertical></q-separator>后，左右两侧的盒子宽度并不相等，卡片内容未被均等分隔。

原代码如下：

<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')

修复方法 #

Quasar的q-card-section默认根据内容自适应宽度，要实现均等分隔，需要利用Quasar的网格布局类强制分配宽度：

• 上方双区域：给两个q-card-section添加col-6类，让它们各占容器50%宽度
• 下方三区域：给每个q-card-section添加col-4类，让它们各占容器1/3宽度
• 补充原代码中缺失的</q-card-section>闭合标签，保证HTML结构完整

修改后的完整代码：

<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 class="col-6">
            <div class="text-h6">Group 1</div>
          </q-card-section>
          <q-separator vertical></q-separator>
          <q-card-section class="col-6">
            <div class="text-h6">Group 2</div>
          </q-card-section>
        </q-card-section>
        <q-separator></q-separator>
        <q-card-section horizontal>
          <q-card-section class="col-4">
            <div class="text-h6">A</div>
          </q-card-section>
          <q-card-section class="col-4">
            <div class="text-h6">B</div>
          </q-card-section>
          <q-card-section class="col-4">
            <div class="text-h6">C</div>
          </q-card-section>
        </q-card-section>
      </q-card>
    </div>
  </div>
</div>

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

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

原理说明 #

Quasar的col-*类基于Flexbox布局，col-6表示在12列网格中占6列（即50%宽度），col-4表示占4列（即1/3宽度）。给q-card-section添加这些类后，容器会强制分配宽度，不再依赖内容自适应，从而实现均等分隔的效果。

内容的提问来源于stack exchange，提问作者Annielaa