1

我希望我的卡片将自己重新定位在地图下方居中的 2 行 2 列中，这样当屏幕尺寸被压缩时，地图下方有 2 行卡片彼此堆叠我做错了什么？我正在尝试实现响应式设计

<div class="container" style="background-color:white" ng-controller="StoreController" ng-cloak>
<md-card>
    <md-card-header style="background-color: dodgerblue; font-size:24px; color: white; width:100%">
        <md-card-header-text>

            <md-card-header-text class="md-title" style="font-size:22px; font-weight: 600"> {{StoreModel.StoreDisplayLink | uppercase}}</md-card-header-text>
            <md-card-header-text class="md-title" , style="color: lightgrey"> <span> city,state </span></md-card-header-text>
        </md-card-header-text>

        <p align="right" style="vertical-align: top; font-size:15px">
            Store Manager
            <br />
            {{StoreModel.StoreContact}}
            <br />
            {{StoreModel.StoreEmail}}
        </p>


    </md-card-header>

    <div class="row" style="flex-wrap:wrap;display:block;text-align: center">

        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 " style="width:100%; max-width:800px;padding-right:80px">

            <div ng-bind-html="maps">

            </div>

        </div>


        <div class="row-lg-12" style="text-align: center;font-size:24px;margin: 0 auto;">

            <button style="display:block; font-size:20px;width:292px;margin-top:20px;margin-right:80px;background-color: lightgrey;">
                <address>
                    <i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 35%);"></i>
                    <span ng-bind-html="StoreModel.StoreAddress" "></span>

                </address>
            </button>


            <button style="display:block; font-size:20px;margin-top:18px;width:292px;background-color: lightgrey;">
                <address ng-cloak>

                    <i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>

                    <span style="position:center"> Phone <span ng-if="isMobile == true"><a href="tel:{{StoreModel.StoreMainPhone | EliminateSpaces}}"> {{StoreModel.StoreMainPhone | uppercase}} </a></span> <span ng-if="isMobile == false">{{StoreModel.StoreMainPhone | uppercase}}</span></span>

                    <span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>


                </address>
            </button>
            <button style="display:block; font-size:20px;margin-top:18px;width:292px;background-color: dodgerblue;height:80px">
                Make Appointment
            </button>


            <button style="display:block; font-size:20px;width:292px; margin-top:18px;margin-bottom:20px;background-color: lightgrey;">
                <address>
                    <div style="float:left">Store Hours:</div>
                    <br />
                    <div ng-bind-html="StoreModel.StoreHours" style="margin-bottom:10px"></div>
                    <div ng-bind-html="StoreModel.StoreStateSeasonalMessage" style="margin-bottom:10px"></div>
                </address>
            </button>

        </div>


    </div>
</md-card>

初始视图：

调整窗口大小后

4

0 回答 0