网格系统中的推/拉类是做什么的？ [英] What do push/pull classes do in a grid system?

问题描述

当我查看很多CSS网格系统和框架时，他们通常都有一个标准的列和行设置，其中包含百分比宽度。例如：

标准网格列：

  .col-10 {
 width：83.33333％; 
 width：calc（100％/ 12 * 10）; 
 width：-webkit-calc（100％/ 12 * 10）; 
 width：-moz-calc（100％/ 12 * 10）; } 
  

然而，除此之外，我经常会看到其他类，比如。推送或 .pull 。例如像这样：
$ b

推/拉类：

  .push-10 {
 left：83.33333％;剩余
：calc（100％/ 12 * 10）; 
剩下：-webkit-calc（100％/ 12 * 10）; 
剩下：-moz-calc（100％/ 12 * 10）; } 
 
.pull-10 {
 left：-83.33333％;剩余
：calc（-100％/ 12 * 10）; 
剩下：-webkit-calc（-100％/ 12 * 10）; 
剩下：-moz-calc（-100％/ 12 * 10）; } 
  

我已经开始使用网格系统，但是我从来不需要使用这些网格系统类。可能是因为我不知道他们在做什么。所以我的问题是：

1. 推式类通常做什么？


2. 什么是拉类通常会做什么？


3. 何时使用它们？


4. 您如何使用它们中的每一个？


5. 提供一个小例子来演示。

解决方案

内容。比方说，你希望你的内容先在HTML标记中出现，然后再在侧边栏中出现，但是你希望侧边栏先在显示器中（左侧），然后再次在右侧显示内容。

以Bootstrap为例： >
< div class =col-md-9 col-md-push-3>这是标记< / strong>中第一个< strong>的内容，但看起来像第二个该视图。< / div>
< div class =col-md-3 col-md-pull-9>这是侧栏，它在标记< / strong>中显示为< strong>秒，但看起来像它来首先在视图中。< / div>
< / div>

col-sm-push-3 意味着将列从左侧移动25％（ left：25％）。 $ b $ < col-sm-pull-9 表示将列从右侧移动75％（ right：75％）。

因此，在这种情况下，大列被推出小列的宽度，而小列被拉到大列的宽度。
$ b

使用Bootstrap的演示

---

类似于：

  .push-10 {
 left：calc（100％/ 12 * 10）; 
} 
  

意思是，取容器的宽度（100％），除以网格中的列数（12）并将其乘以您想要推送的数量（10）。离开你83.33333333％。

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:

standard grid column:

.col-10 {
  width: 83.33333%;
  width: calc(100% / 12 * 10);
  width: -webkit-calc(100% / 12 * 10);
  width: -moz-calc(100% / 12 * 10); }

However, in addition to this, I often see other classes like .push or .pull. For example like this:

push/pull classes:

.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. What does a push class usually do?
2. What does a pull class usually do?
3. When would you want to use each of them?
4. How do you use each of them?
5. Provide a fiddle example to demonstrate.

解决方案

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

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>

The col-sm-push-3 means move the column 25% from the left (left: 25%).

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.

Demo using Bootstrap

---

Something like this:

.push-10 {
    left: calc(100% / 12 * 10);
}

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屋！