在网格系统中，推挽类是做什么的？
在网格系统中，推挽类是做什么的？
提问于 2014-05-09 03:43:14
当我查看许多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); }我已经使用了相当多的网格系统，但我从来不需要使用这些类。可能是因为我不知道他们是做什么的。所以我的问题是：
- 推送课通常做什么？
- 拉力课通常做什么？
- 你想什么时候使用它们中的每一个？
- 你是如何使用它们的？
- 提供一个小提琴的例子来演示。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-05-09 03:57:51
它们是用来重新排序内容的。假设您希望您的内容在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%)。
因此，在这种情况下，大列被“推送”小列的宽度，而小列被‘拉’大列的宽度。
使用Bootstrap演示
就像这样：
.push-10 {
left: calc(100% / 12 * 10);
}也就是说，取容器的宽度(100%)，除以网格中的列数(12)，再乘以要将其推入(10)的数。留给你83.33333333%。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23556230
复制相关文章
相似问题
腾讯云开发者
