dav*_*ghz 47 html css twitter-bootstrap twitter-bootstrap-4 bootstrap-4
我玩引导4,虽然在我无法找到一个解决方案,以增加响应能力卡div用class="card-columns"(本类应用砖石般的效果的卡有这个类的DIV中).
在引导3是容易款式,使"卡片"响应,因为它是可以应用类似class="col-md-3 col-sm-6 col-xs-12"包含一个div thumbnail,caption等等.
在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,0,0.75);
-moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
}
.card {
border-radius: 0 !important;
border: 0 none;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
margin-left: 1px;
margin-right: 1px;
}
.card-img-top {
width: 100%;
border-radius: 0 !important;
}
.card-columns {
padding-top: 15px;
}
以下是两张图片,让我的情况更加清晰:
我希望卡片能够在较小的屏幕上垂直堆叠.
谢谢你的建议!
Zim*_*Zim 49
更新2018 - Bootstrap 4
您可以简单地使用SASS mixin来更改每个断点/网格层中的卡数.
.card-columns {
@include media-breakpoint-only(xl) {
column-count: 5;
}
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(md) {
column-count: 3;
}
@include media-breakpoint-only(sm) {
column-count: 2;
}
}
SASS演示:http://www.codeply.com/go/FPBCQ7sOjX
或者,CSS只是这样......
@media (min-width: 576px) {
.card-columns {
column-count: 2;
}
}
@media (min-width: 768px) {
.card-columns {
column-count: 3;
}
}
@media (min-width: 992px) {
.card-columns {
column-count: 4;
}
}
@media (min-width: 1200px) {
.card-columns {
column-count: 5;
}
}
仅CSS演示:https://www.codeply.com/go/FIqYTyyWWZ
Fah*_*mad 44
引导4(4.0.0-alpha.2)使用CSS属性column-count的card-columns类定义如何的卡多列将里面显示div元素.
但是这个属性只有两个值:
max-width: 34em)min-width: 34em)以下是它在bootstrap.min.css中的实现方式:
@media (min-width: 34em) {
.card-columns {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
?
}
?
}
要使卡堆叠响应,您可以将以下媒体查询添加到css文件中,并min-width根据您的要求修改值:
@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;
}
}
| 归档时间： |
|
| 查看次数： |
85438 次 |
| 最近记录： |