Question

我有一个表单工具，其中包含两个列表和一组工具，这些工具在大屏幕上以三列显示，如此...

<div class="row">
    <div class="col-md-5">
        AVAILABLE LIST (1)
    </div>
    <div class="col-md-2">
        MOVEMENT BUTTONS (2)
    </div>
    <div class="col-md-5">
        SELECTED LIST (3)
    </div>
</div>

...如您所见，对于 xs 和 sm 视口，布局应切换到全宽堆叠列表。我想要做的是在那些较小的视图端口上交换MOVEMENT BUTTONS和SELECTED LIST列的位置，以便工具是最后一行（1-2-3 =＆gt; 1-3） -2）。

我遇到的问题是，当我将col-xs-pull-* col-sm-pull-*等类添加到SELECTED LIST，col-xs-push-* col-sm-push-*添加到MOVEMENT BUTTONS列时，按钮列会消失并且所选列表不对齐。我已经尝试了相应的col-*-push/pull值为1（，因为任何东西都应该换掉它们的全宽，不应该是它们吗？）和12（ >以防万一），两者都有相同的意外结果。

如何将push/pull修饰符类应用于相关的两列，以在xs和sm视口上实现重新排序堆叠？

Answer 1

关于Twitter Bootstrap的一个重要事项是他们采用移动优先的设计思维方式。这意味着适用于超小屏幕的类将一直应用到大屏幕，除非你超载它们。

推送和拉取类也是如此。因此，您需要做的是按照您希望的方式布置按钮，使其处于小屏幕中，然后将它们推入/拉出更大的屏幕到您想要的位置。

换句话说，将HTML中的按钮放在小屏幕中的所需位置，然后使用推/拉介质类将它们移动到更大的屏幕中。

修改

我创造了一个Bootply来展示推拉的概念。看看是否有意义。

它的主旨是：

<div class="col-md-5">
  AVAILABLE LIST (1)
</div>

<div class="col-md-5 col-md-push-2">
  SELECTED LIST (3)
</div>

<div class="col-md-2 col-md-pull-5">
  MOVEMENT BUTTONS (2)
</div>

push类将元素向右移动多个列，而pull类将元素向左移动多个列。例如，如果要切换两个元素，即大小为3的第一个元素和大小为6的第二个元素，则需要按下前6列并拉出后3列，从而有效地切换它们的位置。

如何使用Bootstrap的PUSH和PULL类在两个视口中正确交换列

1 个答案:

修改