固定尺寸但响应卡boostrap3

时间:2018-04-20 12:06:00

标签: css twitter-bootstrap-3 responsive-design bootstrap-grid

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

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

1920x1080px: enter image description here 这是正确的,但在大于此的屏幕上,每行可能会有更多的卡片。

1366x768px: enter image description here 这是错误的,每行只有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;
}

1 个答案:

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