如何偏移CSS网格系统中的div列 | 如何偏移CSS网格系统中的div列

本文介绍了如何偏移CSS网格系统中的div列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有没有人知道偏移侧面行中具有类 col-3-12 div $ c>的偏移量为 offset-6-12 和 offset-9-12 我的网格系统侧面。

Also note that as the columns are floated next to each other, you only need to use the .offset-* class for the first column to push them both to the right side.

And for the second column (The other columns) which has left (and right) margin(s):

Since the column has a left (and right) margin (equals 1/2 of the gutter = 10px)

.row [class*="col-"].offest-6-12 {
    margin-left: calc(((100% - (12/6 - 1) * 20px) / 12 * 6 ) + 20px + 10px);
    /*                |          width of col-6-12         | + (1   + 1/2) gutter width */
}

UPDATED DEMO. (The Sassy way: Sass version)

Note

For the second column, you should use offset-6 because there is another col-3 column before the current column.

I.e. You should count the columns' numbers including the offsets.
For instance: col-3 + col-3 including offset-6 = 12 columns. If you add more columns, it'll break the flow as it exceeds the limit of 12 columns in a row.

Now the columns have a left and right margin of 10px which creates the 20px gutter. That's the reason of adding an extra 10px to the gutter width for offsets.

We could use margin-right: 20px for the columns instead of two margin for left and right side (and no margin for the last column). In this case, we wouldn't need to add the extra 10px.

WORKING DEMO.

这篇关于如何偏移CSS网格系统中的div列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！