Css 如何使用SAS为不同的网格列和断点定制Bootstrap4？

各位开发人员

我试图在大尺寸上得到12列和24个檐槽尺寸，而在一个容器视图中，当它是中等和较低尺寸时，得到6列和18个檐槽，而在另一个容器视图中，大尺寸上得到15列和12个檐槽，同时在较低视图中相应地调整大小

这是我可以在前一个（12列24水槽，6列18水槽）上实现的：

}

当我尝试使用另一个容器类来表示另一个视图（15列，6个水槽）时，我无法理解它。主要是因为我对CSS和SASS的理解可能不多，所以我试着用谷歌搜索，但似乎没有合适的教程

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

        }

    }

}

}

对于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>

可乐
可乐
可乐
可乐
可乐
可乐

这可能吗？如果是这样的话，如何实现我的目标？如果不是，如何实现我的目标

---

谢谢。

您可以创建一个自定义mixin，以在自定义容器中重新生成相应的断点列

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

演示：

---

---

相关：

Wow这很好，不是吹毛求疵，但我看到列之间的边沟仍然采用15px左右的默认引导边沟，而我看到您指定的是6px网格边沟宽度。它不会生效吗？是的，您需要在自定义混音中将

填充-

设置为

$gotter/2

。我更新了答案和演示：哦，这是有道理的。似乎我对将SASS与bootstrap结合使用，特别是对其进行定制的理解严重不足。你对阅读有什么建议来加强我的知识吗？谢谢，这可能会帮助你至少从引导的角度开始，并展示一些其他SASS资源。

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

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