固定大小但响应卡引导 3

Question

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

目前它们的尺寸是固定的，但在较小的屏幕上它们会一个接一个，我希望它们适合屏幕。

1920x1080 像素： 这是正确的，但在比这更大的屏幕上，每行可能会有更多卡片。

1366x768 像素： 这里是错误的，每行只能是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 会发生冲突。默认情况下，引导程序 .panels 的宽度为 100%。

你有.col-lg 3，它必须是.col-lg-3。我将其更改为.col-lg-2，因此它可以在非常大的屏幕上连续放置 6 个“卡片”。

接下来，您必须将列直接放在 .row 中，以便它们正常工作。如果卡片的高度不同，您可能希望将它们分成不同的.rows，这样浮动就不会造成混乱。 （但这会很棘手，因为您需要根据屏幕大小呈现不同的 html）。

提示：Bootstrap 4 现在支持 flex box，这将减少你想要的东西。