html - section - Bootstrap 4-Cartas responsivas en tarjeta-columnas
columnas en bootstrap 4 (5)
Bootstrap 4 (4.0.0-alpha.2) usa el column-count propiedad css en la clase de card-columns para definir cuántas columnas de tarjetas se mostrarían dentro del elemento div .
Pero esta propiedad tiene solo dos valores:
- El valor predeterminado 1 para pantallas pequeñas (
max-width: 34em) - El valor 3 para todos los demás tamaños (
min-width: 34em)
Así es como se implementa en bootstrap.min.css :
@media (min-width: 34em) {
.card-columns {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
⋮
}
⋮
}
Para hacer que el apilamiento de tarjetas sea receptivo, puede agregar las siguientes consultas de medios a su archivo css y modificar los valores de min-width según sus requisitos:
@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;
}
}
Estoy jugando con Bootstrap 4 y no puedo encontrar una solución para agregar capacidad de respuesta a las cartas mientras estoy en un div con class="card-columns" (esta clase aplica un efecto de Masonry a las cartas dentro del div que tiene esta clase ).
En Bootstrap 3 fue fácil diseñar y hacer que las "cartas" respondieran, ya que era posible aplicar algo como class="col-md-3 col-sm-6 col-xs-12" a un div que contiene thumbnail , caption , etc. .
¿Cómo tener el mismo efecto al usar tarjetas en Bootstrap 4?
Aquí está el 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>
Y aquí está el CSS que he usado:
#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;
}
A continuación se presentan dos imágenes para aclarar mi situación:
Me gustaría que las tarjetas se apilaran verticalmente en pantallas más pequeñas.
Gracias por tus sugerencias!
He creado un diseño de tarjetas: 3 tarjetas seguidas utilizando Bootstrap 4 / CSS3 (por supuesto, su capacidad de respuesta). El siguiente ejemplo utiliza clases básicas de Bootstrap 4 como container , row , col-x , list-group list-group-item y elemento de list-group list-group-item . Pensé compartir aquí si alguien está interesado en este tipo de diseño.
HTML
<div class="container"> <div class="row"> <div class="col-sm-12 col-md-4"> <div class="custom-column"> <div class="custom-column-header">Header</div> <div class="custom-column-content"> <ul class="list-group"> <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li> <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li> <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li> <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li> </ul> </div> <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div> </div> </div> <div class="col-sm-12 col-md-4"> <div class="custom-column"> <div class="custom-column-header">Header</div> <div class="custom-column-content"> <ul class="list-group"> <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li> <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li> <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li> <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li> </ul> </div> <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div> </div> </div> <div class="col-sm-12 col-md-4"> <div class="custom-column"> <div class="custom-column-header">Header</div> <div class="custom-column-content"> <ul class="list-group"> <li class="list-group-item"><i class="fa fa-check"></i> Cras justo odio</li> <li class="list-group-item"><i class="fa fa-check"></i> Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fa fa-check"></i> Morbi leo risus</li> <li class="list-group-item"><i class="fa fa-check"></i> Porta ac consectetur ac</li> <li class="list-group-item"><i class="fa fa-check"></i> Vestibulum at eros</li> </ul> </div> <div class="custom-column-footer"><button class="btn btn-primary btn-lg">Click here</button></div> </div> </div> </div> </div>
CSS / SCSS
$primary-color: #ccc; $col-bg-color: #eee; $col-footer-bg-color: #eee; $col-header-bg-color: #007bff; $col-content-bg-color: #fff; body { background-color: $primary-color; } .custom-column { background-color: $col-bg-color; border: 5px solid $col-bg-color; padding: 10px; box-sizing: border-box; } .custom-column-header { font-size: 24px; background-color: #007bff; color: white; padding: 15px; text-align: center; } .custom-column-content { background-color: $col-content-bg-color; border: 2px solid white; padding: 20px; } .custom-column-footer { background-color: $col-footer-bg-color; padding-top: 20px; text-align: center; }
Si está utilizando Sass:
$card-column-sizes: (
xs: 2,
sm: 3,
md: 4,
lg: 5,
);
@each $breakpoint-size, $column-count in $card-column-sizes {
@include media-breakpoint-up($breakpoint-size) {
.card-columns {
column-count: $column-count;
column-gap: 1.25rem;
.card {
display: inline-block;
width: 100%; // Don''t let them exceed the column width
}
}
}
}
solo quiero añadir
poner meta tag viewport en la etiqueta de la cabeza para que sea sensible
Actualización 2018 - Bootstrap 4
Simplemente puede usar la mezcla SASS para cambiar el número de tarjetas en cada nivel de punto de ruptura / cuadrícula.
.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;
}
}
Demostración de SASS: http://www.codeply.com/go/FPBCQ7sOjX
O, CSS solo de esta manera ...
@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;
}
}
Demostración de solo CSS: https://www.codeply.com/go/FIqYTyyWWZ