Question

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

Bootstrap将像这样解决此需求：

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

但这会炸毁我的标记并使我的CMS中的模板有点困难。

我正在寻找具有与上述相同结果的简写，例如container-md-10：

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

如果默认的引导程序值具有12个网格列，则md的容器为

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

我想要的.container-md-10应该是

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

用于带有SCSS的自定义目标标记的Bootstrap 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构建自己的响应式容器类系统？

这绝对有可能，但超出了我在Bootstrap 4中的SCSS功能。

Answer 1

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

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

Answer 2

我发现这可行，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;
 }

Bootstrap 4：如何使用SCSS

2 个答案: