在bootstrap 3中改变较小屏幕上的类风格?

时间:2014-03-23 21:02:42

标签: css html5 twitter-bootstrap media-queries

我正在尝试用\ boostrap 3中名为.text-center的类来解决问题? 但我只想在较小的屏幕上添加到容器元素。 试过这样的事情

col-sm-text-center col-xs-text-center

但是没有用,是不是可以这么简单?

以下是无效的代码

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

1 个答案:

答案 0 :(得分:0)

这种方式不起作用。引导程序3中的Css前缀(.col-xs-,.col-sm-等)仅用于定义不同屏幕大小的列大小,而对齐类就是它 - 用于在块内对齐文本的类。 您可以使用css3媒体查询,例如:

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