固定大小但响应式卡片 bootstrap 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 会发生冲突。 Bootstraps .panels 默认为 100% 宽。

您有 .col-lg 3，必须是 .col-lg-3。我将其更改为 .col-lg-2，这样它可以在非常大的屏幕上连续显示 6 'cards'。

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

提示：Bootstrap4 现在支持 flex box，这样可以更轻松地获得您想要的内容。

固定大小但响应式卡片 bootstrap 3

Fixed size but responsive cards boostrap3

css

twitter-bootstrap-3

responsive-design

bootstrap-grid