引导 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 方式为此制作了一个混合和类(使用像 row 这样的.row-reverse(：

@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将导致元素呈现在弹性列或弹性行的对面。如果有人有更多关于此的信息，那就太好了，但这对我的用例不起作用。也许这可能会帮助其他人。