Bootstrap v4列將不會在啓用flex時浮動

Question

如果在Bootstrap的SCSS變量中設置$enable-flex: true;，則使用引導版v4 css float指令將不會在列上起作用。這是由於flex的工作原理。

flex如何達到同樣的效果？

Answer 1

反向容器的行方向

一種選擇是飄起了row內一切權利。我們可以將它添加到包含元素（如row）來實現這一目標：

flex-direction:row-reverse; 
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */ 

編輯：最終使這個在引導-Y方式混入和類，如果有人有興趣（使用.row-reverse像row）：

@mixin make-row-reverse($gutter: $grid-gutter-width) { 
    @if $enable-flex { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row-reverse; 
    } @else { 
    @include clearfix(); 
    > * { 
     float: right; 
    } 
    } 
    margin-left: ($gutter/-2); 
    margin-right: ($gutter/-2); 
} 

// Row reverse 
// 
// A row with a reversed render direction. 

@if $enable-grid-classes { 
    .row-reverse { 
    @include make-row-reverse(); 
    } 
} 

訂購的單個元素

另一種選擇是指定日e使用order指令命令列應位於容器內部。設置此對包含一列，使之行中第二列：

order: 2; 

自對準

我把這個在這裏純粹是因爲我覺得這是它應該的方式可以完成，但這不適合我的預期。還有一個align-self指令flex其中通過flex-end它會導致該元素呈現在flex列或flex行的相對側。如果有人有關於此的更多信息，那就太好了，但這對我的用例並不起作用。也許這可能會幫助其他人。