抵銷列

曾經被認爲是：抵銷列

<div class="row"> 
    <div class="col-sm-2 col-sm-offset-3"> ... </div> 
</div>

變成了：

<div class="row"> 
    <div class="col-xs-2 offset-xs-3"> ... </div> 
</div>

在引導V4阿爾法

。現在，我已將網站更新至v4 Beta offset-xs-3似乎不再適用：https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns。

如何抵消v4 Beta中的指定數量的列？

https://codepen.io/Deka87/pen/prVLyE

來源

2017-08-22 sdvnksv

看你鏈接到的文檔。 _「我們不再有v3的偏移類風格，而是使用保證金工具，比如.mr-auto」_ – Turnip

你想要的輸出是什麼？ – RBCunhaDesign

「指定數量」是指什麼？舉個例子，如果可以的話，建立一個jsFiddle。我相信你鏈接的文檔非常清晰。 –

我知道這是不是很漂亮，但因爲引導V4-β接過抵消了數出來的遊戲，你可以前添加一個空列，並使其但是很多列要偏移下一個。

[class*="col-"] { 
 
    background-color: #eee; 
 
} 
 
.row { 
 
    background-color: #f9f9f9; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-sm-3"></div> 
 
    <div class="col-sm-2"> 
 
     .col-sm-2 offseted by 3 columns 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-22 11:41:23 RBCunhaDesign

對，希望避免這種情況，儘管我錯過了一些東西。這多次救了我的屁股。 – sdvnksv

@sdvnksv我還沒有將任何東西轉換爲BS v4-beta，但我確實有v4-alpha的項目，並且也使用偏移方法。如果我找到另一種方式，我會回到這裏並分享它。我猜他們之所以把它拿出來，是因爲很多人只使用膠印類來將東西放在屏幕上。 – RBCunhaDesign

謝謝！我也通過Github提交了一個問題。 – sdvnksv

這是你需要什麼，https://jsfiddle.net/5L49z51y/1/？

<div class="row"> 
    <div class="col-sm-2 ml-sm-auto mr-sm-auto"> Here </div> 
</div>

來源

2017-08-22 11:30:55

不，這將它對齊在中間。根據具體情況，我希望它向右移動2-3列。如果你曾經使用'.col-sm-offset-X'或'offset-sm-X'，你應該知道我想要什麼。 – sdvnksv

回答

相關問題