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

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

解决方法

猜你在找的HTML相关文章