html – Bootstrap 4 – 卡列中的响应卡

发布时间：2020-12-14 21:20:33 所属栏目：资源来源：网络整理

导读：我正在玩Bootstrap 4，我找不到一个解决方案来增加对卡片的响应能力，而在一个div中使用class =“card-columns”(这个类对类似于砌体的效果应用于具有此类的div中的卡片)。在Bootstrap 3中，它很容易设计并使“卡片”响应，因为可以将类似class =“col-md-3

我正在玩Bootstrap 4，我找不到一个解决方案来增加对卡片的响应能力，而在一个div中使用class =“card-columns”(这个类对类似于砌体的效果应用于具有此类的div中的卡片)。

在Bootstrap 3中，它很容易设计并使“卡片”响应，因为可以将类似class =“col-md-3 col-sm-6 col-xs-12”的内容应用到包含缩略图，标题等的div中。

在Bootstrap 4中使用卡时如何获得相同的效果？

这是HTML：

<body>

<div class="container-fluid">
    <div class="row">

        <div class="col-md-4 hidden-sm-down" id="map_container">
            <p>here we put the map</p>
        </div>

        <div class="col-md-8 col-sm-12 right_box">

            <div class="row">

                // here there's code for navbar

            </div><!-- row -->

            <div class=row">
                <div class="card-columns">
                    <?php
                    // Create and check connection

                    if ($result->num_rows > 0) {

                        // output card design
                        while($row = $result->fetch_assoc()) {

                            echo '<div class="card">
                                    <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
                                    <div class="card-block">
                                        <h4 class="card-title">' . $row["name"] . '</h4>
                                        <p class="card-text">Text. Card content.</p>
                                    </div>
                                    <div class="card-footer text-muted">
                                        <ul class="list-inline">
                                            <li><i class="fa fa-user"></i></li>
                                            <li>14</li>
                                        </ul>
                                    </div>
                                  </div><!-- card -->';
                        }
                    } else {
                        echo "0 results";
                    }

                    $conn->close();
                    ?>
                </div><!-- container card-columns -->
            </div><!-- row -->
        </div><!-- col-md-8 right_box -->
    </div><!-- row -->
</div><!-- container-fluid -->
</body>

这是我用过的CSS：

#map_container {
background-image: url(map.png);
height: 100vh;
}

.right_box {
-webkit-box-shadow: -2px 0px 2px 0px rgba(0,0.75);
-moz-box-shadow: -2px 0px 2px 0px rgba(0,0.75);
box-shadow: -2px 0px 2px 0px rgba(0,0.75);
}

.card {
border-radius: 0 !important;
border: 0 none;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0.5);
margin-left: 1px;
margin-right: 1px;
}

.card-img-top {
width: 100%;
border-radius: 0 !important;
}

.card-columns {
padding-top: 15px;
}

下面是两张图片，让我的情况更加清晰：

Large screen

Smaller screen

我希望卡片能够在较小的屏幕上垂直堆叠。

谢谢你的建议！

解决方法

Bootstrap 4(4.0.0-alpha.2)使用card-columns类中的css属性column-count来定义div元素内显示的卡列数。

但是这个属性只有两个值：

>小屏幕的默认值1(最大宽度：34em)
>所有其他尺寸的值3(最小宽度：34em)

以下是它在bootstrap.min.css中的实现方式：

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count:3;
        -moz-column-count:3;
        column-count:3;
        ?
    }
    ?
}

要使卡片堆叠响应，您可以将以下媒体查询添加到css文件中，并根据您的要求修改最小宽度值：

@media (min-width: 34em) {
    .card-columns {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
}

@media (min-width: 48em) {
    .card-columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 62em) {
    .card-columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 75em) {
    .card-columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!