0

Bootstrap v4 を使用すると、cssfloatディレクティブが$enable-flex: true;Bootstrap の SCSS 変数内に設定されている場合、列に対して機能しません。これは仕組みによるものflexです。

で同じ効果をどのように達成できflexますか?

4

1 に答える 1

0

コンテナの行方向を逆にする

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別のオプションは、ディレクティブを使用してコンテナー内での列の順序を指定することです。含まれている列の 1 つにこれを設定して、行の 2 番目の列にします。

order: 2;

セルフアライメント

これが本来のやり方だと思うので、純粋にここに置いていますが、意図したとおりに機能していません。それに渡すと、要素がフレックス列またはフレックス行の反対側にレンダリングされる場所のalign-selfディレクティブもあります。誰かがこれに関する情報を持っていれば素晴らしいですが、これは私のユースケースではうまくいきませんでした. おそらく、これは他の誰かを助けるかもしれません。flexflex-end

于 2016-02-11T10:46:35.527 に答える