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

前端之家收集整理的这篇文章主要介绍了css – 推/拉类在网格系统中做了什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我查看很多CSS网格系统和框架时,他们通常会使用百分比宽度的标准列和行设置.像这样的东西例如:

标准网格列:

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

但是,除此之外,我经常会看到其他类,如.push或.pull.例如这样:

推/拉类:

  1. .push-10 {
  2. left: 83.33333%;
  3. left: calc(100% / 12 * 10);
  4. left: -webkit-calc(100% / 12 * 10);
  5. left: -moz-calc(100% / 12 * 10); }
  6.  
  7. .pull-10 {
  8. left: -83.33333%;
  9. left: calc(-100% / 12 * 10);
  10. left: -webkit-calc(-100% / 12 * 10);
  11. left: -moz-calc(-100% / 12 * 10); }

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

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

解决方法

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

以Bootstrap为例:

  1. <div class="row">
  2. <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>
  3. <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>
  4. </div>

col-sm-push-3表示将色谱柱从左侧移动25%(左侧:25%).

col-sm-pull-9表示将色谱柱从右侧移动75%(右侧:75%).

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

Demo using Bootstrap

像这样的东西:

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

意味着,取容器的宽度(100%),除以网格中的列数(12),并将其乘以想要推动的数字(10).离开你83.33333333%.

猜你在找的CSS相关文章