У меня на рабочем столе есть карты Bootstrap (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') }}" alt="QR-Code"></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') }}" alt="OTP">
<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') }}" alt="OTP">
<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') }}" alt="OTP">
<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>
Я хочу, чтобы карты в представлении рабочего стола были меньше. Как я могу сделать это, сохраняя свой мобильный вид таким, какой он есть?
Теперь, когда я изменяю ширину, это также влияет на мобильное представление.