推/拉类在网格系统中做了什么?

2022-01-18 00:00:00 grid css

当我查看许多 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:

  1. 推送类通常有什么作用?
  2. pull 类通常有什么作用?
  3. 您想在什么时候使用它们?
  4. 你如何使用它们?
  5. 提供一个小提琴示例进行演示.

推荐答案

它们用于重新排序内容.假设您希望您的内容在 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.

使用 Bootstrap 演示

类似这样的:

.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%.

相关文章