仅为页面的某个部分(div)定义不同数量的Bootstrap 4列?

时间:2018-07-27 10:21:25

标签: css sass bootstrap-4

默认情况下,引导程序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列?

2 个答案:

答案 0 :(得分:2)

在每行中创建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://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,auto-layout grid是更简单的选项,因为此自定义版本将为CSS增加很多额外的“重量”。


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

答案 1 :(得分:0)

您可以使用自动布局列创建24列网格,也可以通过将$ grid-columns变量更改为24来生成自定义CSS builder

<div class="row">
    <div class="col">
        1
    </div>
    <div class="col">
        2
    </div>
    <div class="col">
      .....
    </div>
    <div class="col">
        24
    </div>