Bootstrap v4推拉

Question

因此，我已经阅读了以下主题： 在Twitter Bootstrap 3中使用col-lg-push和col-lg-pull进行列顺序操作

但是我仍然有一些问题：

我的代码（我将其缩短了一点，但是我认为没有什么重要的东西丢失了）：

    <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东西，在Text div push-sm-10类的东西，但这是行不通的，我的div超出了屏幕边界。

Answer 1

Bootstrap 4已移至完整的flexbox模型，因此不再提供推/拉实用程序。 它们由“ order”实用程序代替。 （提示：文档似乎已过时。即使类名以文档中的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片段功能并不能真正让您发挥响应能力。 显然，这都是定义的宽度。 您应该将代码复制到其他地方以进行操作。