Question

我想让我的卡片有固定的尺寸，但它们适合所有类型的屏幕。

目前它们的尺寸是固定的，但是在较小的屏幕上，它们相互搭配，我希望它们适合屏幕。

1920x1080px：这是正确的，但在大于此的屏幕上，每行可能会有更多的卡片。

1366x768px：这是错误的，每行只有3个。

<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;
}

Answer 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现在支持弹性框，这样可以减少获得你想要的东西。

固定尺寸但响应卡boostrap3

1 个答案: