如何在Bootstrap中創建一個偏移量4

Question

首先，我對我的糟糕英語表示歉意。

我使用引導版本4測試版本（最新不是alpha）。這很好。但我想知道在新版本的bootstrap中他們刪除了偏移類。我會感謝如果有人給我解決方案，我怎樣才能使用flexbox與任何金額的抵消。我的意思是在我使用.col-offset-2之前，這意味着偏移2列，我想用flexbox。謝謝

Answer 1

偏移被替換爲ml - ** - auto。

下面的代碼將在尺寸小於MD小12，但9爲3的尺寸偏移MD和更高。由於我已經把MD內部毫升 - ** - 自動

<div class="col-12 col-md-9 ml-md-auto"> 
     test 
    </div> 

見這裏https://v4-https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

官方文檔此外，還有這裏也是一個很好的答案就如何彌補引導4 Offsetting columns is not working (Bootstrap v4.0.0-beta)

Answer 2

偏移類已通過保證金類替代的作品。它們的前綴爲mr-，其中的保證金爲和ml-爲的保證金爲左。

的documentation演示使用的ml-*-auto（其中*爲目標分辨率 - 如LG或MD）。這是在你的CSS，這實際上是說「推這是最左邊，你可以設置margin-left: auto相當於「。通過使用ml-*-auto和mr-*-auto，您可以有效地對列進行居中。

這是前綴爲auto財產的完整列表：

• ml-距左
• mr-保證金右
• mb-保證金底部
• mt-保證金頂
• mx-水平邊距（左邊距+右邊距）
• my-垂直邊距（距頂部+底部邊距）
• m-所有利潤

除了auto，您可以指定列寬 - ml-lg-2等

所以col-offset-2，其中（我認爲）將推剩下的兩個空間的內容相當於ml-2或ml-lg-2。