Bootstrap v4 推拉网格 类 未按预期工作
Bootstrap v4 push and pull grid classes aren't working as expected
我正在尝试使用 Bootstrap v4（alpha 3）为我正在处理的 Web 应用程序创建响应式布局。
大部分情况下一切正常，但我真正苦苦挣扎的是使用推拉 类 重新排序我的卡片。据我了解，推拉 类 在正确使用时对卡片重新排序，而其余布局响应顺序更改，如 'column ordering' 下文档的网格系统部分所述：
Easily change the order of our built-in grid columns with .push-md-*
and .pull-md-* modifier classes.
可在此处找到：http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
然而，当使用这些 类 时，似乎不是重新排序卡片，而是将它们左右移动（到它们甚至可以重叠或离开屏幕的程度，也建议使用此功能由他们 css）。这也意味着它们具有与偏移函数完全相同的功能，偏移函数的目的是将卡片移动 x 列。
我以前曾设法让它们按预期工作，但不知道如何操作。那么有人可以告诉我我做错了什么吗？
HTML:
<div class="container">
<div class="row">
<div class="card card1 col-lg-4 col-md-6"></div>
<div class="card card2 col-lg-4 col-md-6"></div>
<div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
<div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>
</div>
</div>
CSS:
.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}
JSFIDDLE：
https://jsfiddle.net/61yoqkjk/5/
预期的行为是，在大尺寸和更高尺寸时，绿色方框将向上移动，与红色和蓝色方框位于同一行。然而，绿色和黄色框交换了位置，但现在蓝色框右侧有一个空隙可以容纳绿色框。
这也已在 Bootstrap 3 上进行过尝试，因此我认为这不是错误。
我还检查了其他类似的问题，但 none 他们的回答似乎解决了我的问题。
我认为您可能误解了 bootstrap 的工作原理。您希望元素通过 pulling/pushing 某种 "switch their position"（仅使用 css 很难实现）。 bootstrap 所做的是帮助程序 类 push-xx 和 pull-xx 在视觉上四处移动元素。例如。 pull-lg-8 的代码是：
.pull-lg-8 {
right: 66.666667%;
}
...这不会影响其他元素。想象一下，浏览器首先使用 width, height, float, display, ... 等属性计算每个元素的布局框，然后，在每个元素都有它所属的特定位置后，相对定位的元素在视觉上移动到不同的位置（如果 right, top, bottom or left 被使用）。从结构的角度来看，它们仍然采用相同的 space，但不会影响其他元素。
因此，您的黄色元素（对于第一行而言太大）位于第二行，占 space 的 2/3，而您的绿色元素在第二行的最向右，然后向左推 2/3。
我正在尝试使用 Bootstrap v4（alpha 3）为我正在处理的 Web 应用程序创建响应式布局。
大部分情况下一切正常，但我真正苦苦挣扎的是使用推拉 类 重新排序我的卡片。据我了解，推拉 类 在正确使用时对卡片重新排序，而其余布局响应顺序更改，如 'column ordering' 下文档的网格系统部分所述：
Easily change the order of our built-in grid columns with .push-md-* and .pull-md-* modifier classes.
可在此处找到：http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering
然而，当使用这些 类 时，似乎不是重新排序卡片，而是将它们左右移动（到它们甚至可以重叠或离开屏幕的程度，也建议使用此功能由他们 css）。这也意味着它们具有与偏移函数完全相同的功能，偏移函数的目的是将卡片移动 x 列。
我以前曾设法让它们按预期工作，但不知道如何操作。那么有人可以告诉我我做错了什么吗？
HTML:
<div class="container">
<div class="row">
<div class="card card1 col-lg-4 col-md-6"></div>
<div class="card card2 col-lg-4 col-md-6"></div>
<div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
<div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>
</div>
</div>
CSS:
.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}
JSFIDDLE： https://jsfiddle.net/61yoqkjk/5/
预期的行为是，在大尺寸和更高尺寸时，绿色方框将向上移动，与红色和蓝色方框位于同一行。然而，绿色和黄色框交换了位置，但现在蓝色框右侧有一个空隙可以容纳绿色框。
这也已在 Bootstrap 3 上进行过尝试，因此我认为这不是错误。 我还检查了其他类似的问题，但 none 他们的回答似乎解决了我的问题。
我认为您可能误解了 bootstrap 的工作原理。您希望元素通过 pulling/pushing 某种 "switch their position"（仅使用 css 很难实现）。 bootstrap 所做的是帮助程序 类 push-xx 和 pull-xx 在视觉上四处移动元素。例如。 pull-lg-8 的代码是：
.pull-lg-8 {
right: 66.666667%;
}
...这不会影响其他元素。想象一下，浏览器首先使用 width, height, float, display, ... 等属性计算每个元素的布局框，然后，在每个元素都有它所属的特定位置后，相对定位的元素在视觉上移动到不同的位置（如果 right, top, bottom or left 被使用）。从结构的角度来看，它们仍然采用相同的 space，但不会影响其他元素。
因此，您的黄色元素（对于第一行而言太大）位于第二行，占 space 的 2/3，而您的绿色元素在第二行的最向右，然后向左推 2/3。