element-ui 響應式佈局-柵格佈局

要注意的問題

• xs sm md lg xl五個尺寸的默認值均爲24，意味着，任何一個尺寸屬性不設置，則該尺寸下響應式寬度爲24，這與bootstrap不一樣
• 尺寸屬性能夠設爲0，則該el-col不顯示
• 不論尺寸屬性設置爲多少，若el-col中沒有任何內容則該el-col不顯示（內部元素爲空也不行，如
  ）

<el-row>
    <el-col :xs="12" :sm="9" :md="6" :lg="0" :xl="0">123</el-col>
    <el-col :xs="12" :sm="15" :md="18" :lg="21" :xl="24">456</el-col>
</el-row>

• offset 屬性是沒有響應式的，能夠經過加入一個帶一個空格的el-col解決:

<el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="3">&nbsp;</el-col>

能夠把固定的響應式佈局做爲組件

Vue.component('my-container',{
    template:`
    <el-row>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="18">
            <slot></slot>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
    `
});

調用就行了

<my-container>
    <div style="background: red">內容</div>
</my-container>`