Bootstrap在不同的设备上应用不同的类

Question

我有这个简化的代码：

<div class="row">
    <div class="col-xs-12 col-md-6 text-right">
        <h1>
            Left column
        </h1>       
    </div>

    <div class="col-xs-12 col-md-6 text-right">
        <h1>
            Right column
        </h1>       
    </div>
</div>

我的问题是：如何在较小的设备上显示该text-right类到不同的类（例如：text-left）？

但是当用户从中型设备（MD）打开时，请保留text-right。

谢谢。

Answer 1

您可以使用媒体查询轻松创建自己的自定义类（请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries以供参考）来描述此行为：

@media (max-width: 320px) {
    .conditional-text-align {
        text-align: left;
    }
}

@media (min-width: 321px) {
     .conditional-text-align {
        text-align: right;
    }
}

然后你只需要在HTML中切换类：

<div class="row">
    <div class="col-xs-12 col-md-6 conditional-text-align">
        <h1>
            Left column
        </h1>
    </div>

    <div class="col-xs-12 col-md-6 conditional-text-align">
        <h1>
            Right column
        </h1>
    </div>
</div>

根据您的喜好调整max-width和min-width值。