引導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和居中），PLUS我希望它浮在屏幕的頂部，在文本之前。我假設我必須在我的Login div和​​3210之間添加諸如pull-sm-12之類的內容到我的Text div，但它不起作用，我的div只是漂浮在屏幕邊界之外。

Answer 1

Bootstrap 4已經轉移到完整的flexbox模型，所以push/pull實用程序不再存在。它們被替換爲"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>

不幸的是，堆棧溢出片段的功能並沒有真正讓你玩的響應。這顯然是全部定義的寬度。你應該把代碼複製到其他地方去玩弄它。