twitter-bootstrap 推拉柱子 - Bootstrap 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45366231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pushing and Pulling Columns - Bootstrap 4
提问by Alena
This is what I need:
这就是我需要的：
Desktop:B A
桌面：B A
Mobile:
移动的：
A
B
Here is my HTML:
这是我的 HTML：
<div class="row">
<div class="col-md-7 col-sm-7 push-md-5">
A
</div>
<div class="col-md-5 col-sm-5 pull-md-7">
B
</div>
</div>
It is in correct order on mobile device but not on Desktop. I have tried a couple of guides and help material but without luck. In most guides they are moving equal columns like 4 or 6 so it's a bit confusing to understand it clearly.
它在移动设备上的顺序正确，但在台式机上不正确。我尝试了几个指南和帮助材料，但没有运气。在大多数指南中，他们移动了 4 或 6 等相等的列，因此要清楚地理解它有点令人困惑。
回答by DazBaldwin
In the latest Bootstrap v4.xIt is worth noting that the push-*and pull-*classes have been replaced bythe order-*class.
在最新的Bootstrap v4.x值得注意的是push-*和pull-*类已经被类取代了order-*。
Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.
使用 .order- 类来控制内容的视觉顺序。这些类是响应式的，因此您可以通过断点设置顺序（例如，.order-1.order-md-2）。包括对所有五个网格层的 1 到 12 的支持。
more details and examples can be found here
可以在此处找到更多详细信息和示例
This means that your example (and answer):
这意味着您的示例（和答案）：
<div class="row">
<div class="col-md-7 push-md-5">
A
</div>
<div class="col-md-5 pull-md-7">
B
</div>
</div>
Becomes:
变成：
<div class="row">
<div class="col-md-7 order-md-5">
A
</div>
<div class="col-md-5 order-md-7">
B
</div>
</div>
And with the example given in the question, it would work.
对于问题中给出的示例，它会起作用。
However, as mentioned in the comments below, you don't need to use order-md-5and order-md-7as the order classes are not bound to the grid system other than to allow full control of the positioning of up to 12 columns.
但是，正如下面的评论中提到的，除了允许完全控制最多 12 列的定位之外，您不需要使用order-md-5并且order-md-7因为订单类不绑定到网格系统。
This means that order-md-1and order-md-2are a more suitable solution for this.
这意味着order-md-1和order-md-2是更合适的解决方案。
There are also helpers such as this:
还有像这样的助手：
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
回答by Alena
The above answers are helpful but I'm answering my own question with little more detail so it may help anyone in the future. :)
以上答案很有帮助，但我正在用更多细节回答我自己的问题，因此将来可能会对任何人有所帮助。:)
Problem:Actually, my technique was right but wrong assumption. I was thinking, col-sm-*will apply on mobile devices. But this class is for > 576pxscreens devices.
问题：实际上，我的技术是正确但错误的假设。我在想， col-sm-*将适用于移动设备。但是这个类是针对> 576px屏幕设备的。
Here is the grid classification: (V4 Alpha 6)
这是网格分类：（V4 Alpha 6）
- Extra small:<576px
.col- - Small:≥576px
.col-sm- - Medium:≥768px
.col-md- - Large:≥992px
.col-lg- - Extra large:≥1200px
.col-xl-
- 超小：<576px
.col- - 小：≥576px
.col-sm- - 中：≥768px
.col-md- - 大：≥992px
.col-lg- - 特大：≥1200px
.col-xl-
Reference Bootstrap 4 Alpha for more detail
Technique:
技术：
- First write HTML for mobile screens (e.g A B)
- Use push and pull for large screen devices (e.g B A)
- 首先为移动屏幕编写 HTML（例如 AB）
- 对大屏幕设备（例如 BA）使用推拉
Here is the code, which works for my problem:
这是代码，适用于我的问题：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwtheitroadesjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-7 push-md-5">
A
</div>
<div class="col-md-5 pull-md-7">
B
</div>
</div>
</div>回答by rsigg
The accepted answer here misrepresents what the orderclasses do, which is to merely control the order of flexible items within a flex container (via the CSS orderproperty). They are nota total replacement for all uses of the push-*and pull-*classes but work great for re-ordering columns.
此处接受的答案曲解了order类的作用，即仅控制 flex 容器中灵活项目的顺序（通过 CSSorder属性）。它们并不能完全替代push-*和pull-*类的所有用途，但非常适合对列进行重新排序。
To accomplish what you're looking for BS4 classes, you would need to do:
要完成您正在寻找的 BS4 课程，您需要执行以下操作：
<div class="col-sm-7 col-md-7 order-md-2">
A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
B, shows second on mobile, first on desktop
</div>
As per the migration docsfor BootStrap 4.
See also the CSS orderproperty.
根据BootStrap 4的迁移文档。另见CSSorder属性。
回答by Shiladitya
Here you go with a solution https://jsfiddle.net/kzmz7qaL/1/
在这里，您可以使用解决方案https://jsfiddle.net/kzmz7qaL/1/
.div1{
background: blue;
color: #fff;
}
.div2 {
background: red;
color: #fff;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-7 col-sm-7 push-sm-5 div1">
A
</div>
<div class="col-md-5 col-sm-5 pull-sm-7 div2">
B
</div>
</div>
</div>I guess this is what you are looking for... Changed the pull & push for small screen (sm) rather than medium screen (md)
我想这就是你要找的东西......改变了小屏幕（sm）而不是中屏幕（md）的拉和推
Pullworks on left value (col value specified)
拉动左值（指定 col 值）
Pushworks from right (col value specified)
从右侧推送（指定 col 值）
回答by cello
Bootstrap's "small" (sm) size covers the range from 768 to 992 pixels. "medium" (md) is from 992 to 1200 pixels. (Reference for Bootstrap 4 alpha).
Bootstrap 的“小”( sm) 大小涵盖了从 768 到 992 像素的范围。“中” ( md) 是从 992 到 1200 像素。（Bootstrap 4 alpha 的参考）。
By using class="col-md-7 col-sm-7 push-md-5"you define that the push happens when the screen is wider than 992 pixels. Screens with a width between 768 and 992 pixels just use the col-sm-7setting, and only even smaller screens use the default which uses the full width.
通过使用，class="col-md-7 col-sm-7 push-md-5"您可以定义当屏幕宽度超过 992 像素时发生推送。宽度在 768 到 992 像素之间的屏幕仅使用该col-sm-7设置，只有更小的屏幕才使用使用全宽的默认设置。
So, for very small screens (< 576 pixels) you should see Aon top of B. For small screens (using the smsettings) you'll see A B, as they are not pushed/pulled. And only for larger screens (> 992 pixels, using the mdclasses) you'll see B A.
因此，对于非常小的屏幕（< 576 像素），您应该A在B. 对于小屏幕（使用sm设置），您会看到A B，因为它们不会被推/拉。并且仅对于较大的屏幕（> 992 像素，使用md类），您会看到B A.
To fix it, just get rid of the md-classes, and replace the pull/push-classes with the sm-variants, as others have proposed.
要修复它，只需摆脱md-classes，并用 -variants 替换 pull/push-classes sm，就像其他人提出的那样。
回答by William A.
The col-md-push-5 and col-md-pull-7 classes are not included with Bootstrap 4, but the Bootstrap Extension does. http://bootstrap-extension.com/#gridsystem
col-md-push-5 和 col-md-pull-7 类不包含在 Bootstrap 4 中，但 Bootstrap 扩展包含。http://bootstrap-extension.com/#gridsystem
Solution:
解决方案：
<div class="row">
<div class="col-md-7 col-sm-7 col-md-push-5">
A
</div>
<div class="col-md-5 col-sm-5 col-md-pull-7">
B
</div>
