Bootstrap v4 列不会在启用 flex 的情况下浮动

Question

使用 Bootstrap v4 如果 Bootstrap 的 SCSS 变量中设置了 $enable-flex: true;，css float 指令将不会对列起作用。这是由于 flex 的工作方式。

如何用flex达到同样的效果？

Answer 1

反转容器的行方向

一个选项是将 row 中的所有内容都向右浮动。我们可以将它添加到包含元素（例如row）来实现：

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

编辑：如果有人感兴趣的话，最终会以Bootstrap-y的方式为此制作一个mixin和class（使用.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();
  }
}

对单个元素进行排序

另一种选择是使用 order 指令指定列在容器内的顺序。在包含的列之一上设置它，使其成为行中的第二列：

order: 2;

自对齐

我把它放在这里纯粹是因为我认为这是应该完成的方式，但这对我来说并不像预期的那样有效。还有一个 flex 的 align-self 指令，将 flex-end 传递给它会导致元素呈现在弹性列或弹性行的另一侧。如果有人对此有更多信息，那就太好了，但这对我的用例不起作用。也许这可能会对其他人有所帮助。

Bootstrap v4 列不会在启用 flex 的情况下浮动

Bootstrap v4 columns won't float with flex enabled

css-float

flexbox

bootstrap-4