Как сделать высоту карты bootstrap адаптивной

Question

У меня есть карта bootstrap вроде этой:

<div class="card">
     <div class="card-body">
          This is some text within a card body.
     </div>
</div>

Я хочу сделать высоту адаптивной. Например: для большого экрана h-70, для средних устройств h-50 вот так, как я могу это сделать.

Answer 1

вы можете использовать медиа-запросы в css, например,

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { height:10% }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { height:25% }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { height:50% }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { height:70% }

Вы также можете изменить ширину в соответствии с размером экрана по мере необходимости, например, окно с maximum width 500px должно иметь height of 20%, чтобы вы можно написать вот так

@media (max-width: 500px) { height:20% }