推拉列 - Bootstrap 4答案

【问题标题】：Pushing and Pulling Columns - Bootstrap 4推拉列 - Bootstrap 4
【发布时间】：2020-12-15 19:52:20
【问题描述】：

这是我需要的：

桌面： B A

手机：

A
B

这是我的 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>

它在移动设备上的顺序正确，但在桌面上不正确。我尝试了一些指南和帮助材料，但没有运气。在大多数指南中，它们会移动相同的列，例如 4 或 6，因此清楚地理解它有点令人困惑。

【问题讨论】：

你的代码为我工作。我只将 'col-md-7 col-sm-7 push-md-5' 更改为 'col-sm-7 push-sm-5' 和 'col-md-5 col-sm-5 pull-md-7 ' 到 'col-sm-5 pull-sm-7' 所以在台式机和平板电脑上是 B A，在移动设备上是 A B 垂直
嗯，它适用于我使用 Bootstrap 4.0.0-alpha.6。考虑到 Bootstrap 4 仍处于 alpha 阶段，您使用的是哪个确切版本？你在什么浏览器上测试过？
@DestinatioN 我已经按照你的指示修改了代码，但是没有用:(你是按什么顺序写html的？
@cello 我正在使用 Bootstrap 4.0.0-alpha.6 并在 MAC 上的 Chrome 上进行测试
@Alena 我用的和你一样的顺序。就像其他人说的那样，您使用的是哪个引导程序版本？

标签： twitter-bootstrap bootstrap-4 grid-layout

【解决方案1】：

由于Bootstrap v4.x值得注意的是push-*和pull-*类已经replaced byorder-*类。

使用 .order- 类来控制内容的视觉顺序。这些类是响应式的，因此您可以通过断点设置顺序（例如，.order-1.order-md-2）。包括对所有五个网格层的 1 到 12 的支持。

更多细节和例子可以found here

这意味着您的示例（和答案）：

    <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 class="row">
        <div class="col-md-7 order-md-5">
            A
        </div>
    
        <div class="col-md-5 order-md-7">
            B
        </div>
    </div>

根据问题中给出的示例，它会起作用。

但是，如下面的 cmets 所述，您不需要使用order-md-5 和order-md-7，因为除了允许完全控制之外，订单类不绑定到网格系统最多 12 列的定位。

这意味着order-md-1 和order-md-2 是更合适的解决方案。

还有这样的助手：

    <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>

【讨论】：

我认为如果答案使用 order-md-1 order-md-2 会更清楚。 order-md-{number}后面的数字是列的顺序，与网格系统的宽度无关。
@JorisHart，谢谢，我已经更新了答案以扩展这一点。

【解决方案2】：

以上答案很有帮助，但我正在回答我自己的问题，并提供更多细节，因此将来可能会对任何人有所帮助。 :)

问题：实际上，我的技术是正确的但错误的假设。我在想，col-sm-* 将适用于移动设备。但是这个类是针对> 576px屏幕设备的。

这是网格分类：（V4 Alpha 6）

特小： .col-
小： ≥576px .col-sm-
中等： ≥768px .col-md-
大： ≥992px .col-lg-
特大号： ≥1200px .col-xl-

Reference Bootstrap 4 Alpha for more detail

技术：

首先为移动屏幕编写 HTML（例如 A B）
对大屏幕设备（例如 B A）使用推拉

这是解决我的问题的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/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>

【讨论】：

【解决方案3】：

这里接受的答案歪曲了 order 类的作用，即仅控制弹性容器中弹性项目的顺序（通过 CSS order 属性）。它们不是完全替代 push-* 和 pull-* 类的所有用途，但非常适合重新排序列。

要完成您正在寻找的 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>

根据 BootStrap 4 的 migration docs。另请参阅CSS order property。

【讨论】：

【解决方案4】：

这里有一个解决方案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>

我想这就是你要找的... 更改了小屏幕 (sm) 而不是中屏 (md) 的拉和推

拉取作用于左值（指定列值）

Push 从右边开始（指定 col 值）

【讨论】：

#1。为什么拉和推对md 不起作用？ #2。您的代码在小提琴中有效，但在我的 HTML 中无效。很奇怪，但有什么想法吗？
在您的代码中，pull 和 push 实际上适用于 md。但是您需要为 sm 指定相同的值
这里有更新的代码 jsfiddle.net/kzmz7qaL/2 。你能检查一下浏览器控制台，如果有任何错误发生......
感谢您的努力，没有任何控制台错误。我犯了一个小错误。
请提及错误...这样如果有人提到您的问题，不应该面临同样的问题...

【解决方案5】：

Bootstrap 的“小”(sm) 大小涵盖从 768 到 992 像素的范围。 “中” (md) 是从 992 到 1200 像素。 (Reference for Bootstrap 4 alpha)。

通过使用class="col-md-7 col-sm-7 push-md-5"，您可以定义当屏幕宽度超过 992 像素时发生推送。宽度在 768 到 992 像素之间的屏幕只使用col-sm-7 设置，只有更小的屏幕才使用使用全宽的默认设置。

因此，对于非常小的屏幕（B 之上看到A。对于小屏幕（使用sm 设置），您将看到A B，因为它们没有被推/拉。并且仅对于更大的屏幕（> 992 像素，使用md 类），您会看到B A。

要修复它，只需删除 md-classes，并按照其他人的建议将 pull/push-classes 替换为 sm-variants。

【讨论】：

感谢您的解释。我误解了导致麻烦的列命名方案。

【解决方案6】：

Bootstrap 4 不包含 col-md-push-5 和 col-md-pull-7 类，但 Bootstrap Extension 包含。 http://bootstrap-extension.com/#gridsystem

解决方案：

<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>

【讨论】：