Question

当我查看很多CSS网格系统和框架时，他们通常会使用百分比宽度的标准列和行设置。像这样的东西：

标准网格列：

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

但是，除此之外，我经常会看到其他类，例如.push或.pull。例如：

推/拉类：

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

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

推送课通常做什么？
拉班经常做什么？
你想什么时候使用它们？
你如何使用它们？
提供一个小提琴示例来演示。

Answer 1

他们要重新排序内容。假设您希望您的内容首先出现在HTML标记中，然后是第二个侧边栏，但您希望侧边栏在显示中位于第一位（左侧），然后内容位于第二位（右侧）。

以Bootstrap为例：

<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%）。

col-sm-pull-9表示将列从右侧移动75％（right: 75%）。

因此，在这种情况下，大柱被“推”到小柱的宽度，而小柱被“拉”到大柱的宽度。

<强> Demo using Bootstrap

这样的事情：

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

意思是，取容器的宽度（100％），除以网格中的列数（12），然后将其乘以要推动的数字（10）。离开你83.33333333％。

push / pull类在网格系统中做了什么？

1 个答案: