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片段功能並不能真正讓您發揮響應能力。 顯然，這都是定義的寬度。 您應該將代碼復制到其他地方以進行操作。