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 其中的值来定义子元素的排版方式。
```html
<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"></div></el-col>
</el-row>

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

@ -32,17 +32,17 @@
.el-col-sm-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
}
.el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
.el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}
@media (min-width: 992px) {
@ -50,17 +50,17 @@
.el-col-md-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
}
.el-col-md-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
.el-col-md-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-md-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}
@media (min-width: 1200px) {
@ -68,16 +68,16 @@
.el-col-lg-$i {
width: calc(1 / 24 * $(i) * 100)%;
}
}
.el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
.el-col-xs-offset-$i {
margin-left: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-pull-$i {
position: relative;
right: calc(1 / 24 * $(i) * 100)%;
}
.el-col-xs-push-$i {
position: relative;
left: calc(1 / 24 * $(i) * 100)%;
}
}
}