อันนี้จะเป็นตัว code ทั้งหมดนะคะ
โค้ด: เลือกทั้งหมด
<v-footer padless>
<v-card flat>
<v-card-title>
<v-row>
<v-col cols="12" md="3" class="mx-9">
<h6 class="font-weight-medium">แผนที่</h6>
</v-col>
<v-col cols="12" md="3" class="mx-9">
<h6 class="font-weight-medium">ติดต่อเรา</h6>
</v-col>
<v-col cols="12" md="3" class="mx-9">
<h6 class="font-weight-medium">ที่อยู่</h6>
</v-col>
</v-row>
</v-card-title>
</v-card>
</v-footer>
โค้ด: เลือกทั้งหมด
<v-row>
</v-row>
โค้ด: เลือกทั้งหมด
<v-col cols="12" md="3" class="mx-9">
<h6 class="font-weight-medium">แผนที่</h6>
</v-col>
ส่วน cols คือขนาดของหน้าจอ โทรศัพท์ ค่ะ
md คือขนาดของหน้าจอ โน๊ตบุ๊ค ค่ะ จริงๆจะมีหลายขนาด แต่ขอยกมาแค่ 2 ขนาดนะคะ
mx-9 คือให้ margin-right: 36px และ margin-left: 36px
ผลลัพธ์ :
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify viewtopic.php?f=73&t=67912
วิธีการ ใช้งาน vuetify คู่กับ vue.js viewtopic.php?f=73&t=67917