X时居中div，否则右对齐

Question

我有两个按钮：

<div class="row pt-20">
        <div class="col-xs-12 col-sm-6  text-right pr-20">
            <a href="{!! URL::action('TournamentController@create') !!}" type="button"
               class="btn border-primary btn-flat text-primary disabled text-uppercase p-10 ">{{ trans('core.see_open_tournaments') }}
                {{--( {{trans('core.soon')}} )--}}
            </a>
        </div>
        <div class="col-xs-12 col-sm-6 text-left pl-20">
            <a href="{!! URL::action('TournamentController@create') !!}" type="button"
               class="btn btn-primary text-uppercase p-10">{{ trans('core.create_new_tournament') }}
            </a>
        </div>
    </div>

我想要实现的是当分辨率> xs时右/左对齐，当res = xs时居中对齐。

实现它的最佳方式是什么？

我在考虑在div中删除文本，并在css中使用媒体查询，但我认为有更优雅的方法，不是吗？

Tx！

Answer 1

创建一个名为text-center-xs的类，并将适当的样式添加到自定义样式表中：

@media (max-width: 767px) {
    .text-center-xs {
        text-align: center;
    }
}