html - Bootstrap v4 推拉

Question

所以我已经阅读了这个主题:Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

但是我还有一些问题:

我的代码(我已经缩短了一点，但我认为没有遗漏任何重要的东西):

    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    <div class="col-lg-4 col-md-10 justify-content-center"  >
        /*My login div*/
    </div>

所以，我想要发生的事情:在小屏幕上，我希望我的 Login div 几乎和屏幕一样宽(10/12 和居中)，另外我希望它浮在屏幕的顶部屏幕，在文本之前。我假设我必须向我的 Login div 添加类似 pull-sm-12 的内容，向我的 添加类似 push-sm-10 的内容>Text div，但它不起作用，我的 div 只是漂浮在屏幕边界之外。

Answer 1

Bootstrap 4 已经移动到一个完整的 flexbox 模型，所以推/拉实用程序不再存在。它们被 "order" utilities 取代. (提示:文档似乎已过时。尽管文档中的类名以 order 开头，但实际上它们以 flex 开头，即 flex- first，而不是 order-first。)无论如何，根据您的描述，我认为以下代码将帮助您完成大部分工作。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-sm-wrap flex-md-nowrap justify-content-sm-center justify-content-md-start">
    <div class="flex-sm-last flex-md-unordered">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="flex-sm-first flex-md-unordered"  >
        Login box
    </div>
</div>

不幸的是，Stack Overflow 片段功能并不能真正让您玩转响应式。显然，这都是定义的宽度。您应该将代码复制到其他地方来试用它。