CSS：如何向现有网格添加允许在左侧跳过列的类

Question

我正在尝试在不使用库的情况下设置简单的柱状网格。 到目前为止，我的以下内容按预期工作（至少足以让我学习）。

我想不通的是如何设置一个类样式来跳过左侧的一些列，这样 div 就不会跨越整个屏幕宽度。

例如我想设置一个类来跳过第一列然后跨越 10 列 (83.33%) 以便最后我在屏幕的左右边缘有一个“空白”列.

我在这里唯一能想到的就是使用某种占位符 div，只有一个 col 类，没有内容，但我认为这不是一个好习惯。

谁能告诉我如何正确地做到这一点，例如通过使用某种缩进？ 这也可以是两个类的组合，以便它可以与任何现有的 col 类组合。

我的 CSS：

.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

非常感谢。

Answer 1

我认为您正在寻找偏移属性。这是由 Twitter Bootstrap 完成的，例如：http://getbootstrap.com/css/#grid-offsetting。

这个 stackoverflow 主题可能会有所帮助：
CSS offset in Bootstrap-like grid
How to offset div columns in CSS grid system