How to customize Bootstrap 4 using SASS for different grid columns and breakpoints?

问题

fellow devs,

I'm trying to get 12 columns and 24 gutter size on large size, while 6 columns and 18 gutters when it's medium and lower on one container view, while another container view it would be 15 columns and 12 gutters on the large size while resizing accordingly on lower views??

This is what I can achieve on the former (12 col 24 gutters, 6 columns 18 gutters):

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 );

        }

    }

}

}

while I tried to do another container class to act for another view (15 columns, 6 gutters), I can't get my head around it. Mainly because my CSS and SASS understanding might be sparse, tried googling it but it seems there's no proper tutorial?

.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);

}

for 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>

Is this even possible? If so how and if not what a good way to achieve what i intended to achieve?

Thanks.

回答1:

You can make a custom mixin to regenerate the appropriate breakpoint columns inside the custom container...

@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);
}

Demo: https://www.codeply.com/go/SLmHas8zEZ

Related: Define different number of Bootstrap 4 columns for some part (div) of page only?

来源：https://stackoverflow.com/questions/52518766/how-to-customize-bootstrap-4-using-sass-for-different-grid-columns-and-breakpoin

标签

css

twitter-bootstrap

Sass

bootstrap-4