Html 引导多个文本列

我试图用bootstrap制作一个响应性强的多列文本aria。 我试着在网上查找，但找不到我需要的东西

这是我试图做的一个例子，但我想让它响应，随着屏幕变小，所有内容都应该放在一列上

---

任何指点都将不胜感激。多谢各位

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

---

我知道这是一篇老文章，但那些仍在搜索的人可能会发现这很有用。如果将其添加到custom.scs或类似文件中并进行编译，则它将挂接到引导断点，并使您能够为列数范围指定每个刻度的列数。在本例中，您可以应用class.text-columns-2，例如，应用的数字将适合媒体的大小

为了便于访问，我将此映射放在我的_variables.scs中

$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),
);

我把这个放在了我的定制中

// 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;
        }
    }
}

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

更新 或者，为了使其更有效，您可以将其放入_variables.scs中

$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: 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;
        }
    }
}

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

经过