我想让我的卡片有固定的尺寸,但它们适合所有类型的屏幕。
目前它们的尺寸是固定的,但是在较小的屏幕上,它们相互搭配,我希望它们适合屏幕。
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;
}
答案 0 :(得分:1)
<div class="catalogo">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
<div class="panel catalogo-item">
<!-- card contents -->
</div>
</div>
[...]
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-12" ng-repeat="sistema in $ctrl.sistemasFavoritos | filter:search">
<div class="panel catalogo-item">
<!-- card contents -->
</div>
</div>
[...]
</div>
</div>
您不需要添加的CSS。 width:100%
和max-width
以及min-width
会发生冲突。默认情况下,Bootstraps .panel
的宽度为100%。
您的.col-lg 3
必须是.col-lg-3
。我将其更改为.col-lg-2
,因此它可以在非常大的屏幕上连续显示6张“卡片”。
接下来,您必须将列直接放在.row
内才能使它们正常工作。如果卡的高度不同,您可能希望将它们划分为不同的.rows
,因此浮动不会导致混乱。 (但这很棘手,因为你需要根据屏幕尺寸渲染不同的html)。
提示:Bootstrap 4现在支持弹性框,这样可以减少获得你想要的东西。