css-float - Bootstrap v4 列在启用 flex 时不会浮动

Question

如果在 Bootstrap 的 SCSS 变量中设置，则使用 Bootstrap v4 的 cssfloat指令将不适用于列。$enable-flex: true;这是由于工作方式flex。

怎样才能达到同样的效果flex呢？

Answer 1

反转容器的行方向

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

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

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

自对准

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