推/拉类在网格系统中做了什么? [英] What do push/pull classes do in a grid system?
问题描述
当我查看许多 CSS 网格系统和框架时,它们通常具有标准的列和行设置以及百分比宽度.例如这样的事情:
When I look at a lot of CSS grid systems and frameworks they usually have a standard column and row setup with percentage widths. Something like this for example:
标准网格列:
.col-10 {
width: 83.33333%;
width: calc(100% / 12 * 10);
width: -webkit-calc(100% / 12 * 10);
width: -moz-calc(100% / 12 * 10); }
但是,除此之外,我还经常看到其他类,例如 .push
或 .pull
.比如这样:
However, in addition to this, I often see other classes like .push
or .pull
. For example like this:
推/拉类:
.push-10 {
left: 83.33333%;
left: calc(100% / 12 * 10);
left: -webkit-calc(100% / 12 * 10);
left: -moz-calc(100% / 12 * 10); }
.pull-10 {
left: -83.33333%;
left: calc(-100% / 12 * 10);
left: -webkit-calc(-100% / 12 * 10);
left: -moz-calc(-100% / 12 * 10); }
我已经开始使用网格系统了,但我从来不需要使用这些类.可能是因为我不知道他们在做什么.所以我的问题是:
I've come to use grid systems quite a bit but I've never needed to use these classes. Probably because I don't know what they do. So my questions are:
- 推送类通常有什么作用?
- pull 类通常有什么作用?
- 您想在什么时候使用它们?
- 你如何使用它们?
- 提供一个小提琴示例进行演示.
推荐答案
它们用于重新排序内容.假设您希望您的内容在 HTML 标记中排在第一位,然后是侧边栏,但您希望侧边栏在显示中排在第一位(左侧),然后是内容排在第二位(在右侧).
They're for reordering content. Lets say you want your content to come first in the HTML markup and then a sidebar second, but you want the sidebar to come first in the display (on the left) and then the content to come second (on the right).
以 Bootstrap 为例:
Using Bootstrap as an example:
<div class="row">
<div class="col-md-9 col-md-push-3">This is content that comes <strong>first in the markup</strong>, but looks like it comes second in the view.</div>
<div class="col-md-3 col-md-pull-9">This is the sidebar, that comes <strong>second in the markup</strong>, but looks like it comes first in the view.</div>
</div>
col-sm-push-3
表示将列从左侧移动 25%(left: 25%
).
The col-sm-push-3
means move the column 25% from the left (left: 25%
).
col-sm-pull-9
表示将列向右移动 75%(right: 75%
).
The col-sm-pull-9
means move the column 75% from the right (right: 75%
).
所以在这种情况下,大列被推"小列的宽度,而小列被拉"大列的宽度.
So in this scenario the large column is being 'pushed' the width of the small column, and the small column is being 'pulled' the width of the large column.
类似这样的:
.push-10 {
left: calc(100% / 12 * 10);
}
意思是,取容器的宽度(100%),除以网格中的列数(12),再乘以你想要推动它的数字(10).剩下 83.33333333%.
Means, take the width of the container (100%), divide it by the number of columns in the grid (12) and multiple it by the number you want to push it by (10). Leaving you with 83.33333333%.
这篇关于推/拉类在网格系统中做了什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!