css - xs 时居中 div，否则右对齐

Question

我有 2 个按钮:

<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 中删除 text-right，并在 css 中使用媒体查询来完成，但我认为有更优雅的方法，不是吗？？？？

谢谢!

Answer 1

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

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