bootstrap 多个文本列

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

我知道这是一个旧的 post 但那些仍在搜索的人可能会发现它很有用。如果您将它添加到您的 custom.scss 或类似的并编译然后它挂钩到 Bootstrap 断点并使您能够为一系列列号指定每个比例的列数。在此示例中，您可以应用 class .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 多个文本列

bootstrap multiple text columns

html

css

responsive-design

twitter-bootstrap