时间戳

首页 > 解决方案 > 重新调整响应式引导行和列

php - 重新调整响应式引导行和列

问题描述

请问我怎样才能使这3个按钮集中，最后一个按钮集中在下一行而不影响整个框架。

<div class="col-md-4 col-12 col-lg-3 center-search">
                             <div class="">
                                 <button (click)="searchEmployeeName()" class="btn btn-raised mr-1 shadow-z-2 btn-success btn-sm">
                                     {{'Search' | translate}}
                                 </button>
                           </div>                       
                           <div class="">
                                <button (click)="reset()" class="btn btn-raised mr-1 shadow-z-2 btn-warning btn-sm ml-1">
                                   {{'Reset' | translate}}
                                </button>
                             </div>             
                             <div class="">
                                <button (click)="viewAll()"  class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ml-1">
                                    {{'View All' | translate}}
                                </button>
                            </div>
                            <div class="">
                                <button (click)="exportToExcel()" class="btn btn-raised mr-1 pull-rightshadow-z-2 btn-danger btn-sm ml-1">
                                   {{'Export To Excel' | translate}}
                                </button>
                            </div>
                         </div>

在此处输入图像描述

标签： phplaravelbootstrap-4responsive-designgrid

解决方案

添加另一个div：

<div class="col-md-4 col-12 col-lg-3 center-search">
<div class="d-flex justify-content-center">
    <div class="">
        <button (click)="searchEmployeeName()" class="btn btn-raised mr-1 shadow-z-2 btn-success btn-sm">
            {{'Search' | translate}}
        </button>
    </div>
    <div class="">
        <button (click)="reset()" class="btn btn-raised mr-1 shadow-z-2 btn-warning btn-sm ml-1">
            {{'Reset' | translate}}
        </button>
    </div>
    <div class="">
        <button (click)="viewAll()" class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ml-1">
            {{'View All' | translate}}
        </button>
    </div>
    <div class="">
        <button (click)="exportToExcel()" class="btn btn-raised mr-1 pull-rightshadow-z-2 btn-danger btn-sm ml-1">
            {{'Export To Excel' | translate}}
        </button>
    </div>
</div>

推荐阅读