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>

我希望实现的是当分辨率＆gt;时左右对齐。 xs，并在res = xs时对齐中心。

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

我正在考虑在div中删除text-right，并使用媒体查询在css中执行此操作，但我认为有更优雅的方法可以做到这一点，不是吗？

的Tx！

Answer 1

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

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

xs时居中div，否则右对齐

1 个答案: