Как настроить Bootstrap 4, используя SASS для разных столбцов сетки и точек останова?

Question

собратья,

Я пытаюсь получить 12 столбцов и размер 24 желоба для большого размера, в то время как 6 столбцов и 18 желобов, когда он средний и ниже, в одном представлении контейнера, в то время как в другом представлении контейнера это будетбыть 15 столбцов и 12 желобов большого размера при изменении размера соответственно на нижних видах ??

Это то, чего я могу достичь в первом случае (12 столбцов, 24 желоба, 6 столбцов и 18 желобов):

background-grid {

@include make-row();

@include make-col-ready;



@each $breakpoint in map-keys($grid-breakpoints) {

    @include media-breakpoint-up($breakpoint) {

        //@include make-col(map-get($dani-number-col, $breakpoint ));

        .row.no-gutters {

            margin-right: map-get($dani-row-no-gutters, $breakpoint );

            margin-left: map-get($dani-row-no-gutters, $breakpoint );

        }         

        .row > .col,

        .row > [class*="col-"] {

            margin-right: map-get($dani-gutters, $breakpoint );

            margin-left: map-get($dani-gutters , $breakpoint );

        }

    }

}

}

, пока я пытался создать другой контейнерный класс, чтобы действовать для другого вида (15 столбцов, 6 желобов), я не могу обойти это.В основном потому, что моё понимание CSS и SASS может быть скудным, попытался найти его в Google, но, похоже, нет подходящего учебника?

.foreground-container {

width: 1428px;

@include make-foreground-container();



@each $breakpoint in map-keys($grid-breakpoints) {

    @include media-breakpoint-up($breakpoint) {

        //@include make-col(map-get($dani-number-col, $breakpoint ));

        // @include make-col(15);

        .foreground-row {

            margin-right: map-get($dani-row-no-gutters, $breakpoint );

            margin-left: map-get($dani-row-no-gutters, $breakpoint );

        }         

        .foreground-row > .foreground-col,

        .foreground-row > [class*="foreground-col"] {

            margin-right: map-get($dani-row-no-gutters, $breakpoint );

            margin-left: map-get($dani-row-no-gutters, $breakpoint );

        }

    }

}

}

.foreground-row {

    @include make-foreground-row();

    // @include make-col(12);

}



.foreground-col {

    @include make-col-ready();

    @include make-col(15);

}

для HTML, css

<div class="background-container">
  <div class="container">
    <div class="row">
      <div class="col">col1</div>
      <div class="col">col2</div>
      <div class="col">col3</div>
    </div>
  </div>
</div>

<div class="foreground-container">
  <div class="container">
    <div class="row">
      <div class="col">col1</div>
      <div class="col">col2</div>
      <div class="col">col3</div>
    </div>
  </div>
</div>

Это вообще возможно?Если да, то как, а если нет, то какой хороший способ достичь того, чего я намеревался достичь?

Спасибо.

Answer 1

Вы можете создать собственный миксин для регенерации соответствующих столбцов точек останова внутри пользовательского контейнера ...

@mixin make-grid-columns-custom($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    // only override lg and up
    @include media-breakpoint-up('lg', $breakpoints) {
      @for $i from 1 through $columns {
        .col#{$infix}-#{$i} {
          padding-right: ($gutter / 2);
          padding-left: ($gutter / 2);
          @include make-col($i, $columns);
        }
      }

    }
  }
}

@import "bootstrap";

$foreground-container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1428px
);

/* make the container for the custom grid */
.foreground-container > .container {
    @include make-container();
    @include make-container-max-widths($foreground-container-max-widths, $grid-breakpoints);
}

.foreground-container {
    /*  custom col for all breakpoints */
    @include make-grid-columns(6, 3px, $grid-breakpoints);

    /* override lg and up using custom mixin */
    @include make-grid-columns-custom(15, 6px, $grid-breakpoints);
}

Демонстрация: https://www.codeply.com/go/SLmHas8zEZ

---

Похожие: Определить различное количество столбцов Bootstrap 4 только для некоторой части (div) страницы?