1

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

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 个网格列 .container for 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
  }
}

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

如何在 Bootstrap 中引用 $container-max-widths

@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 能力。

4

2 回答 2

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; }      
    }
  }
}
于 2018-12-18T13:14:13.633 回答
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;
 }
于 2020-09-29T01:21:38.813 回答