引导多个文本列

Question

我正在尝试使用引导程序制作响应式多列文本咏叹调。 我尝试在网上查找，但找不到我需要的东西。

这是我正在尝试做的一个例子，但我想让它响应，随着屏幕变小，所有内容都应该在一列上 http://www.w3schools.com/css/tryit.asp?filename=trycss3_column-rule-width

任何指点将不胜感激。谢谢。

Answer 1

使用 CSS 媒体查询来调整屏幕宽度的属性。 您的解决方案示例

@media (min-width: 1200px) {
    .example {
      -webkit-column-count: 4;
      -moz-column-count: 4;
      column-count: 4;
      -webkit-column-gap: 3em;
      -moz-column-gap: 3em;
      column-gap: 3em;
    }
  }

@media (min-width: 600px) and (max-width: 1200px) {
  .example {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

@media (max-width: 600px) {
  .example {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-gap: 3em;
    -moz-column-gap: 3em;
    column-gap: 3em;
  }
}

Answer 2

我知道这是一篇旧文章，但那些仍在搜索的人可能会发现这很有用。如果将其添加到 custom.scss 或类似文件中并进行编译，那么它会挂钩 Bootstrap 断点，并使您能够为一系列列号指定每个比例的列数。在此示例中，您可以应用类 .text-columns-2 例如，所应用的数字将适合媒体的大小。

我将此地图放在我的 _variables.scss 中以便于访问

$responsive_text_columns : (
    1: (sm: 1, md: 1, lg: 1, xl: 1),
    2: (sm: 1, md: 1, lg: 2, xl: 2),
    3: (sm: 1, md: 2, lg: 3, xl: 3),
    4: (sm: 1, md: 2, lg: 4, xl: 4),
);

我把它放在我的custom.scss中

// Responsive Text columns
@each $num_columns, $apply in $responsive_text_columns {
    .text-columns-#{$num_columns} {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0.7em;
        -moz-column-gap: 0.7em;
        column-gap: 0.7em;
    }
    @include media-breakpoint-up(sm) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "sm" );
            -moz-column-count: map-get($apply , "sm" );
            column-count: map-get($apply , "sm" );
            -webkit-column-gap: 0.7em;
            -moz-column-gap: 0.7em;
            column-gap: 0.7em;
        }
    }
    @include media-breakpoint-up(md) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "md" );
            -moz-column-count: map-get($apply , "md" );
            column-count: map-get($apply , "md" );
            -webkit-column-gap: 1em;
            -moz-column-gap: 1em;
            column-gap: 1em;
        }
    }
    @include media-breakpoint-up(lg) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "lg" );
            -moz-column-count: map-get($apply , "lg" );
            column-count: map-get($apply , "lg" );
            -webkit-column-gap: 1.2em;
            -moz-column-gap: 1.2em;
            column-gap: 1.2em;
        }
    }
    @include media-breakpoint-up(xl) {
        .text-columns-#{$num_columns} {
            -webkit-column-count: map-get($apply , "xl" );
            -moz-column-count: map-get($apply , "xl" );
            column-count: map-get($apply , "xl" );
            -webkit-column-gap: 1.5em;
            -moz-column-gap: 1.5em;
            column-gap: 1.5em;
        }
    }
}

更新 或者为了使其更加高效，您可以将其放入您的 _variables.scss

$responsive_text_columns : (
    1: (sm: (cols: 1, gutter: 0rem), md: (cols: 1, gutter: 0rem), lg: (cols: 1, gutter: 0rem), xl: (cols: 1, gutter: 0rem)),
    2: (sm: (cols: 1, gutter: 0rem), md: (cols: 1, gutter: 0rem), lg: (cols: 2, gutter: 1.2rem), xl: (cols: 2, gutter: 1.5rem)),
    3: (sm: (cols: 1, gutter: 0rem), md: (cols: 2, gutter: 1rem), lg: (cols: 3, gutter: 1.2rem), xl: (cols: 3, gutter: 1.5rem)),
    4: (sm: (cols: 1, gutter: 0rem), md: (cols: 2, gutter: 1rem), lg: (cols: 4, gutter: 1.2rem), xl: (cols: 4, gutter: 1.5rem)),
);

这在 custom.scss 中

// Responsive Text columns
@each $num_columns, $apply in $responsive_text_columns {
    .text-columns-#{$num_columns} {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0em;
        -moz-column-gap: 0em;
        column-gap: 0em;
    }
    @each $scale in ("sm", "md", "lg", "xl")
    {
        @include media-breakpoint-up($scale) {
            .text-columns-#{$num_columns} {
                -webkit-column-count: map-get(map-get($apply , $scale ), "cols");
                -moz-column-count: map-get(map-get($apply , $scale ), "cols");
                column-count: map-get(map-get($apply , $scale ), "cols");
                -webkit-column-gap: map-get(map-get($apply , $scale ), "gutter");
                -moz-column-gap: map-get(map-get($apply , $scale ), "gutter");
                column-gap: map-get(map-get($apply , $scale ), "gutter");
            }
        }
    }
}

Answer 3

BS5 的小 SCSS 片段：

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint);
  @include media-breakpoint-up($breakpoint) {
    @for $i from 1 through 4 {
      .text-col#{$infix}-#{$i} {
        column-count: $i;
      }
    }
  }
}