【问题标题】:Changing class style on smaller screen in boostrap 3?在引导程序 3 中更改小屏幕上的班级风格?
【发布时间】:2014-03-24 05:30:47
【问题描述】:

我正在尝试在 \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>

【问题讨论】:

    标签: css html twitter-bootstrap media-queries


    【解决方案1】:

    这种方式是行不通的。 bootstrap 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;
      }
    }
    

    【讨论】:

    • 是的,我知道,如果我们可以使用我建议的东西,而不是框架外的这么少的媒体查询,那就太好了
    猜你喜欢
    • 2018-08-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多