我想让我的卡片尺寸固定,但它们适合所有类型的屏幕。
目前它们的尺寸是固定的,但在较小的屏幕上它们会一个接一个,我希望它们适合屏幕。
1920x1080px: 这里是正确的,但是在比这更大的屏幕上,每行可能会有更多的卡片。
<div class="row">
<section class="catalogos">
<div class="catalogo">
<div class="col-lg 3 col-md-3 col-sm-12 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
<div class="panel catalogo-item">
<div class="media-left media-middle">
<div class="catalogo-item-icone-conteudo">
<a href="{{sistema.url}}" target="_blank">{{ sistema.nome.substring(0, 1) | uppercase}}</a>
</div>
</div>
<div class="media-body">
<h4 class="media-heading">
<a href="{{sistema.url}}" target="_blank">{{sistema.nome | uppercase}}</a>
</h4>
<p>{{sistema.descricao}}</p>
</div>
<div class="media-right">
<a ng-click="$ctrl.removeFavorito(sistema)" class="fa fa-star yellow"></a>
</div>
</div>
</div>
</div>
</section>
</div>
CSS:
.catalogo-item {
height: 100%;
width:100%;
max-width: 380px;
max-height: 125px;
min-width: 380px;
min-height: 125px;
padding: 10px;
}