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

前端之家收集整理的这篇文章主要介绍了html – Bootstrap 4 – 卡列中的响应卡前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在玩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;
    }
}
原文链接:https://www.f2er.com/html/232444.html

猜你在找的HTML相关文章