💄 Responsive layout with grid
This commit is contained in:
parent
761cb651ab
commit
cd93d3a8a0
3 changed files with 20 additions and 14 deletions
|
@ -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>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue