github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix col responsive style bug

pull/1207/head
baiyaaaaa 2016-11-17 11:37:02 +08:00 committed by Leopoldthecoder
parent 7dcbc9add2
commit 99eb9366eb
2 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/zh-CN/layout.md
View File

@ -250,7 +250,7 @@
::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
```html ```html
<el-row type="flex" class="row-bg"> <el-row type="flex" class="row-bg">
<el-col :span="6" :sm="8" :md="{span: 4, offset: 2}"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row> </el-row>

6
packages/theme-default/src/col.css
View File

@ -32,7 +32,6 @@
.el-col-sm-$i { .el-col-sm-$i {
width: calc(1 / 24 * $(i) * 100)%; width: calc(1 / 24 * $(i) * 100)%;
} }
}
.el-col-xs-offset-$i { .el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%; margin-left: calc(1 / 24 * $(i) * 100)%;
} }
@ -44,13 +43,13 @@
position: relative; position: relative;
left: calc(1 / 24 * $(i) * 100)%; left: calc(1 / 24 * $(i) * 100)%;
} }
}
} }
@media (min-width: 992px) { @media (min-width: 992px) {
@for $i from 1 to 24 { @for $i from 1 to 24 {
.el-col-md-$i { .el-col-md-$i {
width: calc(1 / 24 * $(i) * 100)%; width: calc(1 / 24 * $(i) * 100)%;
} }
}
.el-col-md-offset-$i { .el-col-md-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%; margin-left: calc(1 / 24 * $(i) * 100)%;
} }
@ -62,13 +61,13 @@
position: relative; position: relative;
left: calc(1 / 24 * $(i) * 100)%; left: calc(1 / 24 * $(i) * 100)%;
} }
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@for $i from 1 to 24 { @for $i from 1 to 24 {
.el-col-lg-$i { .el-col-lg-$i {
width: calc(1 / 24 * $(i) * 100)%; width: calc(1 / 24 * $(i) * 100)%;
} }
}
.el-col-xs-offset-$i { .el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%; margin-left: calc(1 / 24 * $(i) * 100)%;
} }
@ -80,4 +79,5 @@
position: relative; position: relative;
left: calc(1 / 24 * $(i) * 100)%; left: calc(1 / 24 * $(i) * 100)%;
} }
}
} }