移动设备和台式机上的引导卡大小不同

Posted 2023-03-28

【中文标题】移动设备和台式机上的引导卡大小不同

【英文标题】：Bootstrap Card size different on mobile and desktop

【发布时间】：2021-04-26 06:24:32

【问题描述】：

我的桌面上有引导卡 (bootstrap4)，如下所示：

我的手机视图是这样的：

我的html代码是：

    <div class="card-deck">
    <div class="center card" style="width: 100%;">
        <a href=" path('qrcodemanual') "><img id="qrcheck" class="card-img-top" src=" asset('images/mobile_qr_code.png') "  ></a>
        <div class="card-body">
            <h5 class="card-title"> '/'|trans 
                % if qrcodeEnrollStatus == 1 %
                    <span class="badge badge-success float-right"> '/'|trans  </span>
                % else %
                    <span class="badge badge-secondary float-right"> '/'|trans  </span>
                % endif %
            </h5>
            <p class="card-text"> 'userhome.qrcode.text'|trans </p>
            <a href=" path('qrcodemanual')" class="btn btn-primary"> '/'|trans </a>
        </div>
    </div>

    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src=" asset('images/OTP.png') " >
        <div class="card-body">
            <h5 class="card-title"> '/'|trans 
                % if smsEnrollStatus != null %
                    <span class="badge badge-success float-right"> '/'|trans  </span>
                % else %
                    <span class="badge badge-secondary float-right"> '/'|trans  </span>
                % endif %
            </h5>
            <p class="card-text"> '/'|trans </p>
            <a href=" path('smsmanual')" class="btn btn-primary"> '/'|trans </a>
        </div>
    </div>
</div>

<br>
<h5>Other options:</h5>
<br>

<div class="card-deck">
    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src=" asset('images/OTP.png') " >
        <div class="card-body">
            <h5 class="card-title"> '/'|trans 
                % if emergencyEnrollStatus == 1 %
                    <span class="badge badge-success float-right"> '/' |trans  </span>
                % else %
                    <span class="badge badge-secondary float-right"> '/' |trans  </span>
                % endif %
            </h5>
            <p class="card-text"> '/'|trans </p>
            <a href=" path('emergencypasswordmanual')" class="btn btn-primary"> '/'|trans </a>
        </div>
    </div>

    <div class="center card" style="width: 100%;">
        <img class="card-img-top" src=" asset('images/OTP.png') " >
        <div class="card-body">
            <h5 class="card-title"> '/'|trans </h5>
            <p class="card-text"> '/'|trans </p><br>
            <a href="/" class="btn btn-primary"> '/'|trans </a>
        </div>
    </div>
</div>

我希望桌面视图中的卡片更小。如何在保持移动视图不变的同时做到这一点？

现在当我改变宽度时，移动视图也会受到影响。

【参考方案1】：

您可以使用@media 来控制一些 CSS 以仅用于桌面显示，如下所示：

  <style>
      @media  only screen and (min-width : 768px) 
          .card 
            display: block !important;
            width: 25rem !important;
            flex:none !important;
          
      
  </style>