码迷,mamicode.com
首页 > 其他好文 > 详细

iview响应式布局

时间:2019-09-25 10:45:23      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:export   小例子   col   exp   class   style   view   back   temp   

我想说,我要被逼成前端了。

之前没接触过响应式,这两天和另一位前端程序媛小小的研究了下。做了一个小例子,记录一下,方便以后使用。

<template>
  <div>
    <Row>
        <Col :xs="{ span: 24}" :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
    </Row>
   <Row>
        <Col :xs="{ span: 24}" :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
        <Col :xs="{ span: 24}"  :md="{ span:11, offset: 1 }" :lg="{ span: 5, offset: 1 }">Col</Col>
    </Row>
  </div>
</template>
<script>
    export default {
        
    }
</script>
<style>
  .ivu-col{
    border:1px solid red
  }
</style>

 

iview响应式布局

标签:export   小例子   col   exp   class   style   view   back   temp   

原文地址:https://www.cnblogs.com/tuituji27/p/11582816.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!