💄 Responsive layout with grid

This commit is contained in:
zhbaor 2023-02-23 16:10:33 +08:00
parent 761cb651ab
commit cd93d3a8a0
3 changed files with 20 additions and 14 deletions

View file

@ -27,13 +27,21 @@ const p4 = {
</script>
<template>
<div
class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
>
<AudioCard v-bind="p1"></AudioCard>
<AudioCard v-bind="p2"></AudioCard>
<AudioCard v-bind="p3"></AudioCard>
<AudioCard v-bind="p4"></AudioCard>
<div class="container overflow-hidden">
<div class="row g-3 py-3">
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p1"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p2"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p3"></AudioCard>
</div>
<div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
<AudioCard v-bind="p4"></AudioCard>
</div>
</div>
</div>
</template>