前端 - 在bootstrap中使用了`col-sm-4`这样的类名为什么没有用？

Question

在bootstrap中使用了col-sm-4这样的类名为什么没有用？

使用的是官网上提供的模板搭建的环境

猜测是没有导入某一个模块，然后我就查看了col-sm-4这样的类名是怎么定义和导入的。

// myProject/scss/style.css@import "bootstrap/scss/grid";

可见，我们导入了栅格系统模块。

// myProject/node_modules/bootstrap/_grid.css@if $enable-grid-classes {  @include make-grid-columns();}

• $enable-grid-classes定义在_variable.scss中，并且值为true
• make-grid-columns mixin定义了.col-{}-{}这样的类名。

// myProject/node_modules/bootstrap/mixins/_grid.css@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {  @each $breakpoint in map-keys($breakpoints) {    $infix: breakpoint-infix($breakpoint, $breakpoints);    @include media-breakpoint-up($breakpoint, $breakpoints) {      // Provide basic `.col-{bp}` classes for equal-width flexbox columns      .col#{$infix} {        flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4      }      .row-cols#{$infix}-auto > * {        @include make-col-auto();      }      @if $grid-row-columns > 0 {        @for $i from 1 through $grid-row-columns {          .row-cols#{$infix}-#{$i} {            @include row-cols($i);          }        }      }      .col#{$infix}-auto {        @include make-col-auto();      }      @if $columns > 0 {        @for $i from 1 through $columns {          .col#{$infix}-#{$i} {            @include make-col($i, $columns);          }        }        // `$columns - 1` because offsetting by the width of an entire row isn't possible        @for $i from 0 through ($columns - 1) {          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0            .offset#{$infix}-#{$i} {              @include make-col-offset($i, $columns);            }          }        }      }

在这里我们定义了形如.col#{$infix}, .col#{$infix}-#{$i}的类名。但是当我们使用这些类名的时候发现被没有任何的效果。

Answer 1

其实没有问题。这些规则写在了media里面，当宽度在一定范围内时才有效。

// myProject/node_modules/bootstrap/mixins/_breakpoints.css@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {  $min: breakpoint-min($name, $breakpoints);  @if $min {    @media (min-width: $min) {   //<<<<<<<<< 媒体查询      @content;    }  } @else {    @content;  }}