Bootstrap 4 - Responsive Karten in Kartenspalten
Ich spiele mit Bootstrap 4 und finde keine Lösung, um die Reaktionsfähigkeit von Karten zu erhöhen, während ich mich in einem @ befinddiv mitclass="card-columns" (Diese Klasse wendet einen Masonry-ähnlichen Effekt auf die Karten in der Div mit dieser Klasse an.)
n Bootstrap 3 war eseinfac um "Karten" ansprechend zu stylen und zu gestalten, da es möglich war, so etwas wie @ anzuwendclass="col-md-3 col-sm-6 col-xs-12" zu einem div mitthumbnail, caption, etc
Wie kann ich den gleichen Effekt erzielen, wenn ich Karten in Bootstrap 4 verwende?
Hier ist der 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>
Und hier ist das CSS, das ich verwendet habe:
#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;
}
Unten sind zwei Bilder angegeben, um meine Situation klarer zu machen:
Ich möchte, dass Karten auf kleineren Bildschirmen vertikal gestapelt werden.
Vielen Dank für Ihre Vorschläge!