Question

关于这个问题，我已经在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>

Answer 1

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

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

Answer 2

你只需要思考＆＃34;移动优先＆＃34;。首先为最小的设备布局创建标记，然后使用推/拉调整大屏幕。 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://www.codeply.com/go/aUME1OcT0S

bootstrap pull and push column

2 个答案: