Quiero hacer una sensible cartas de la baraja usando bootstrap 4 ancho fijo tarjetas. Aquí he publicado el código de abajo, pero no responde por qué?

<div class="card-deck">
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 1</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 2</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 3</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>
<div class="card col-lg-2 col-md-3 col-sm-4 col-6" style="max-width: 12rem;">
    <div class="card-body">
        <h4 class="card-title">Title 4</h4>
        <p>Small text here</p>
        <small class="text-muted">3 mins ago</small>
    </div>
</div>

  • No es sensible como no romper uno por uno, cuando la disminución de la vista del puerto

3 Comentarios

  1. 16

    Para un Bootstrap 4 cartas de la baraja con de ancho fijo tarjetas de ello:

    Coloque cada tarjeta en una columna con las clases col-auto mb-3 (auto-ancho de columna + margen inferior con 3 unidades).

    A centro de añadir el justify-content-center de la clase a la fila.

    Aquí un trabajo fragmento de código (haga clic en «ejecutar fragmento de código a continuación y ampliar a página completa):

    HTML:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class="container-fluid mt-4">
    <div class="row justify-content-center">
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    <div class="col-auto mb-3">
    <div class="card" style="width: 18rem;">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
    </div>
    </div>
    </div>
    </div>
    </div>

    • El problema con esto es que las cartas tienen diferentes alturas.
    • Funciona bien, gracias.
    • Esto puede ser solucionado mediante la adición de la clase h-100 a la tarjeta. Gran respuesta, exactamente lo que estaba buscando!
  2. 2

    En aquí mencionado, estas opciones de diseño aún no son sensibles. Así que he encontrado una solución sencilla. El cambio de la matriz <div class="card-deck">...</div> a <div class="row">...</div>.

    Gracias por todos sus comentarios.

  3. 0

    De la cubierta hace que las tarjetas de la misma altura
    Añadir fila de la eliminación de la cubierta fue correcta
    La adición de col-lg-3 col-md-2 col-sm-12
    Le doy 4 tarjetas de escritorio, etc a 1 en un teléfono
    Conjunto de altura utilizando la altura de el mayor número para un ok mira hacia

Dejar respuesta

Please enter your comment!
Please enter your name here