-1

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

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

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

1 回答 1

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%andmax-width和会min-width发生冲突。默认情况下, Bootstraps.panel的宽度为 100%。

你有.col-lg 3哪个必须是.col-lg-3。我把它改成这样,.col-lg-2它可以在非常大的屏幕上连续放置 6 张“卡片”。

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

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

于 2018-04-20T12:39:53.183 回答