css - 在 bootstrap 3 的小屏幕上更改类样式？

Question

我正在尝试在\boostrap 3 中使用名为 .text-center 的类？但我只想在较小的屏幕上将其添加到容器元素中。试过这样的东西

col-sm-文本中心 col-xs-文本中心

但是不行，有没有可能让它变得如此简单？

这是无效的代码

 <div class="col-md-6 col-sm-text-center col-xs-text-center">
          <h2 class="color-brand">Lorem Ipsum</h2>
          <p class="color-grey">Lorem ispums dolor sit</p>
        </div>

Answer 1

这样不行。 bootstrap 3 中的 Css 前缀(.col-xs-、.col-sm- 等)仅用于定义不同屏幕尺寸的列大小，而对齐类就是它的本质 - 用于在 block 内对齐文本的类。您可能只使用 css3 媒体查询，例如:

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { 
  .my-fancy-block {
    text-align:center;
  }
}