自举推拉柱答案

【问题标题】：bootstrap pull and push column自举推拉柱
【发布时间】：2022-01-09 01:49:58
【问题描述】：

我在 stackoverflow 上阅读了很多关于这个问题的主题。但是，我已经阅读并使用了此处提供的解决方案！出于某种原因，这些东西对我不起作用。我得到一个完全空白的页面。

这个想法是让主按钮高于超小型设备上的默认按钮。出于某种原因，即使在 md 和 sm 设备上我也完全空白。

不胜感激。谢谢

<body>
    <div class="row">
        <div class="col-md-6 col-xs-12 col-xs-push-12">
            <button class="btn btn-default" type="button">Button</button>
        </div>
        <div class="col-md-6 col-xs-12 col-xs-pull-12">
            <button class="btn btn-primary" type="button">Button</button>
        </div>
    </div>
</body>

【问题讨论】：

Swap the positions of grids which are side by side to top and bottom using bootstrap的可能重复

标签： html twitter-bootstrap grid

【解决方案1】：

您只需要考虑“移动优先”。首先为最小的设备布局创建标记，然后使用推/拉来调整它以适应更大的屏幕。 col-xs-12 不是必需的，因为列会自动堆叠在 xs 宽度上。

<div class="row">
    <div class="col-md-6 col-md-push-6">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
    <div class="col-md-6 col-md-pull-6">
        <button class="btn btn-default" type="button">Button</button>
    </div>
</div>

演示：http://codeply.com/go/aUME1OcT0S

更新：从 Bootstrap 4 开始，可以重新排序 12 个单位列：bootstrap pulling/pushing 12 columns not working properly

【讨论】：

这是哪个 Bootstrap 版本？在 Bootstrap 4 中找不到像“col-md-push-6”这样的名称。
@Top-Master 5 年前是 Bootstrap 3，早期是 Bootstrap 4。OFC Bootstrap 3 确实有 col-md-push-6

【解决方案2】：

很遗憾，由于推/拉的工作方式，您不能在 col-*-12 上使用推/拉方法。因此，一个非常有效的解决方案是让移动设备的顺序正确，然后在更大的屏幕尺寸上使用推/拉方法，如下所示：

<div class="row">
    <div class="col-xs-12 col-md-6 col-md-push-6">
        <button class="btn btn-primary" type="button">Button</button>
    </div>
    <div class="col-xs-12 col-md-6 col-md-pull-6">
        <button class="btn btn-default" type="button">Button</button>
    </div>
</div>

这是一个可以工作的代码笔：http://codepen.io/egerrard/pen/NdqpXZ?

仅供参考，您也只使用 md 和 xs 列符号，但您提到您只需要 xs 屏幕尺寸的此功能。如果是这种情况，您需要将您的 md 列更改为 sm。

【讨论】：