Question

例如，我有以下HTML：

    <div class="header__container">
      <div class="header__info-row">
        <section class="social__col">
        </section>
        <section class="contact__col">
        </section>
      </div>
    </div>

使用sass，我像这样指定行和列：

    .header__container {
      @include make-container();
    }

    .header__info-row {
      @include make-row();
    }

    .header__navigation-row {
      @include make-row();
    }

    .social__col {
      @include make-col-ready();

      @include media-breakpoint-up(xs) {
        @include make-col(6);
      }
    }

    .contact__col {
      @include make-col-ready();

      @include media-breakpoint-up(xs) {
        @include make-col(6);
      }
    }

有什么方法可以指定内部sass的flex-行为，例如d-flex，justify-content，align-content等？

Answer 1

就您在Bootstrap的文档中所见，除了sass mixins之外，它们还提供了一些类来控制网格元素的CSS行为。例如

<div class="row justify-content-center">
<div class="row justify-content-end">
<div class="col align-self-start">

所以我很确定，如果您弄弄那些类，就会得到想要的行为。

如果您需要自定义解决方案，请编写自己的Sass mixin，并将其包含在Bootstrap的mixin之后，以覆盖它们提供的默认值。

如何通过sass连续应用flex行为？

1 个答案: