css - 仅为页面的某些部分(div)定义不同数量的 Bootstrap 4 列？

Question

默认情况下，Bootstrap 4 有 12 列。可以通过(https://getbootstrap.com/docs/4.0/getting-started/theming/)创建 custom.scss 文件并将 SASS 编译成将替换默认 Bootstrap css 文件的 css 文件来更改列数。可以通过覆盖变量来完成:

$grid-gutter-width: 14px;
$grid-columns: 24;

这适用于整个页面。但是我的页面的某些区域具有完全不同的结构。是否可以仅为某些区域定义不同数量的 Bootstrap 列？

Answer 1

在每行中创建 24 列的最简单方法是使用 auto-layout grid explained in my answer here。

但是，如果您需要一个包含所有响应断点的完整 24 列网格...

选项 1

一个选项是创建自定义 SASS @mixin(非常类似于 Bootstrap 4 make-grid-columns mixin)。请注意，在 mixin 中我使用了 .col24- 而不是 .col-...

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

@mixin make-custom-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
  %grid-column {
    position: relative;
    width: 100%;
    min-height: 1px; // Prevent columns from collapsing when empty
    padding-right: ($gutter / 2);
    padding-left: ($gutter / 2);
  }

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

    @for $i from 1 through $columns {
      .col24#{$infix}-#{$i} {
        @extend %grid-column;
      }
    }
    
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      .col24#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }
      .col24#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
      }

      @for $i from 1 through $columns {
        .col24#{$infix}-#{$i} {
          @include make-col($i, $columns);
        }
      }

      @for $i from 0 through $columns {
        .order#{$infix}-#{$i} { order: $i; }
      }
    }
    
  }
  
}


@include make-custom-grid-columns(24, 10px, $grid-breakpoints);


/* remember to import Bootstrap after the changes */ 
@import "bootstrap";

这允许标准的 12 单位网格 (.col-*) 与 24 单位网格 (col24-*) 共存，因此您可以将其用作需要。

演示:https://codeply.com/go/GFkzKlFyX2

选项 2

另一种选择是为 24 列网格扩展自定义容器(即:container-24)类。这将允许您简单地将 container-24 用于自定义网格，并且该行 col-* 将保持常规 (col-{breakpoint}-1 .. col-{断点}-24)...

.container-24 {
    @include make-container();
    @include make-container-max-widths($container-24-max-widths, $grid-breakpoints);

    /*  custom cols- 24 column grid with 6px gutter */
    @include make-grid-columns(24, 6px, $grid-breakpoints);
}

演示:https://codeply.com/go/Adfnwh9p4x

---

IMO，auto-layout grid 是更简单的选项，因为此自定义构建将为 CSS 添加很多额外的“权重”。

---

相关:How to extend/modify (customize) Bootstrap 4 with SASS