Question

如果在Bootstrap的SCSS变量中设置float，则使用Bootstrap v4，css $enable-flex: true;指令将不适用于列。这是由于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;

自我对齐

我之所以完全放在这里，是因为我认为这是应该完成的方式，但这对我来说并不合适。 align-self还有一个flex指令，将flex-end传递给它会导致元素在flex列或flex行的对侧呈现。如果有人对此有任何更多的信息，那就太棒了，但这对我的用例并不起作用。也许这可能会帮助其他人。

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

1 个答案: