引导4:如何使用SCSS构建一个灵活的容器宽度，例如容器-sm-10

Question

在我的日常工作中，我在一个页面上使用多个引导容器。我需要一个灵活的容器宽度为每一个.

引导将像这样解决这一需求：

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10">
      My content
    </div>
  </div>
</div>

但是这破坏了我的标记，使我的CMS中的模板变得有点困难。

，我正在寻找一个缩写，例如容器-md-10，其结果与上面的：相同。

<div class="container-sm-12 container-md-10">
  My content
</div>

如果默认引导值为12个网格列，则md的.container为

@media (min-width: 768px){
  .container{
    max-width:720px
  }
}

一个我想要的.容器-md-10应该是

@media (min-width: 720px){
  .container-md-10{
    max-width:600px
  }
}

SCSS的自定义响应标记的引导带4引用是

https://getbootstrap.com/docs/4.0/getting-started/theming/#responsive

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

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

这样做的结果例如

@media (min-width: 768px){
  .text-md-left{
    text-align:left !important
  }
}

根据这篇文章，你可以像这样构建你自己的容器

How to refer to $container-max-widths in Bootstrap

@mixin make-max-widths-container-width($max-widths: $container-max-
widths, $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
        max-width: $container-max-width;
    }
  }
}
.container{
   @include make-max-widths-container-width();
}

那么，我如何使用这些引用来使用SCSS构建我自己的响应容器类系统，如上面所述？

这是完全可能的，但在引导4中超出了我的SCSS能力。

Answer 1

我发现这个可以用，Bootstrap v.5

备选案文1

@mixin default-max-widths($max-widths: $container-max-widths, 
  $breakpoints: $grid-breakpoints) {
  @each $breakpoint, $container-max-width in $max-widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      max-width: $container-max-width;
    }  
  }
}

.my-container {
  @include make-container();
  @include default-max-widths();

}

选项2

.my-container {
  @include make-container();
  @extend .container;
 }

Answer 2

我终于找到了实现这一目标的方法：

@for $i from 1 through ($grid-columns) {
  @each $breakpoint, $container-max in $container-max-widths {
    $container-max: ($container-max/1px)*$i/$grid-columns;
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .container-#{$i} { max-width: #{$container-max}px; }      
    }
  }
  @each $breakpoint, $container-max in $container-max-widths {
    $container-max: ($container-max/1px)*$i/$grid-columns;
    @include media-breakpoint-only($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
        .container#{$infix}-#{$i} { max-width: #{$container-max}px; }      
    }
  }
}