Question

我正在尝试使用bootstrap制作响应式多列文本咏叹调。我尝试在线查找但找不到我需要的东西。

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

任何指针都将非常感激。谢谢。

Answer 1

使用CSS媒体查询调整屏幕宽度的属性。 Example of your solution

@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");
            }
        }
    }
}

bootstrap多个文本列

2 个答案: