[英]bootstrap v4 push pull gone
看看bootstrap v4更新:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1
...為新的flexbox驅動的訂單類刪除了push和pull修飾符類。 例如,代替.col-8.push-4和.col-4.pull-8,您將使用.col-8.order-2和.col-4.order-1。
但是當我使用order函數時,它似乎與推拉方法的工作方式不同。 它將行堆疊起來,就像下面代碼中的第一行一樣。
我的目標是在左側有一個img,右側有一行文本,左側是文本,另一行是桌面上下一行的img。 當它在較小的屏幕中調整大小時,我希望每個圖像堆疊在它對應的文本的頂部。
<div class="container">
<div class="row">
<div class="col-md-4">
<!--img-->
</div>
<div class="col-md-8">
<!--text-->
</div>
</div>
<div class="row">
<div class="col-md-8 order-2">
<!--text-->
</div>
<div class="col-md-4 order-1">
<!--img-->
</div>
</div>
</div>
如果要在md
上更改順序,可以為該大小定義第一個正常順序,然后為所有較小的大小定義order-n
。 所以你的代碼應該是這樣的。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-4"> img </div> <div class="col-md-8"> text </div> </div> <div class="row"> <div class="col-md-8 order-2 order-md-1"> text </div> <div class="col-md-4 order-1 order-md-2"> img </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.