仅为页面的某个部分(div)定义不同数量的Bootstrap 4列? [英] Define different number of Bootstrap 4 columns for some part (div) of page only?

问题描述

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

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

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

解决方案

在每行中创建24列的最简单方法是使用自动布局网格在我的答案中进行了解释.

但是，如果您需要一个带有所有响应断点的 complete 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://www.codeply.com/go/GFkzKlFyX2

选项2

另一个选择是为24列网格扩展自定义容器(即:container-24)类.这将使您可以简单地将container-24用于自定义网格，并且col- *行将保持常规(col-{breakpoint}-1 .. col-{breakpoint}-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://www.codeply.com/go/Adfnwh9p4x

---

IMO，自动布局网格是更简单的选项，因为此自定义版本会增加很多额外的重量" "添加到CSS.

---

相关:如何扩展/修改(自定义)带有SASS的Bootstrap 4

By default Bootstrap 4 has 12 columns. It is possible to change the number of columns by (https://getbootstrap.com/docs/4.0/getting-started/theming/) creating custom.scss file and SASS-compiling it into css file that will replace the default Bootstrap css file. It can be done by overriding variables:

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

This works for the entire page. But I have some region of the page with completely different structure. Is it possible to define distinct number of Bootstrap columns for some region only?

解决方案

The easiest way to create 24 columns across each row is to use the auto-layout grid explained in my answer here.

However, if you need a complete 24-column grid with all of the responsive breakpoints...

Option 1

One option is to create a custom SASS @mixin (very similar to the Bootstrap 4 make-grid-columns mixin). Notice in the mixin that I used .col24- instead of .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";

This allows the standard 12 unit grid (.col-*) to co-exist with the 24 unit grid (col24-*) so you can use either as needed.

Demo: https://www.codeply.com/go/GFkzKlFyX2

Option 2

Another option is to extend a custom container (ie:container-24) class for the the 24 column grid. This would allow you to simply use container-24 for the custom grid, and the row, col-* would remain the conventional (col-{breakpoint}-1 .. col-{breakpoint}-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);
}

Demo: https://www.codeply.com/go/Adfnwh9p4x

---

IMO, the auto-layout grid is the simpler option as this custom build will add a lot of extra "weight" to the CSS.

---

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

这篇关于仅为页面的某个部分(div)定义不同数量的Bootstrap 4列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！