bootstrap多个文本列

Question

我正在尝试使用bootstrap制作响应式多列文本咏叹调.我尝试在网上看,但找不到我需要的东西.

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

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

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