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

Question

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

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

例如我想 设置一个 class 来跳过第一列然后跨越 10 列 (83.33%) 这样最后我有一个 "blank" 列在屏幕的左右边缘。

我在这里唯一能想到的是使用某种占位符 div，只有一个列 class，没有内容，但我认为这不是好的做法。

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

我的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.

这个 Whosebug 主题可能有帮助：

How to offset div columns in CSS grid system

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

CSS: How to add classes to existing grid that allow skipping columns on the left side

css

gridview

grid

col

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

CSS: How to add classes to existing grid that allow skipping columns on the left side

css

gridview

grid

col

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