Hay una manera de crear una mampostería de diseño de la columna de la utilización de la flexbox grid de Bootstrap 4 viene equipado con? A mí me parece que todas las columnas son iguales de altura.

  • He hecho una búsqueda en Google y no fue capaz de encontrar nada en concreto. La descalificación es tan infantil en una nueva pregunta, cuando estoy seguro de que hay más de una persona en busca de una respuesta. También ¿qué quiere usted decir con «nosotros» esta no es su empresa y que es una comunidad, si usted no tiene ningún interés en proporcionar retroalimentación positiva por qué incluso tomar su tiempo para comentar.
  • Es posible que desee leer esto: stackoverflow.com/help/how-to-ask
  • No estoy de acuerdo que esta pregunta es offtopic. Creo que es una pregunta válida para pedir en este caso en particular, y me las arreglé para proporcionar una respuesta sensata.
  • Entonces usted también podría querer leer esto: stackoverflow.com/help/how-to-ask y este: stackoverflow.com/help/on-topic

1 Comentario

  1. 24

    Esto es bastante factible con el estándar Bootstrap 4 clases. Incluso hay una sección entera en la documentación sobre el Tarjeta de columnas característica.

    De la documentación:

    Tarjetas pueden ser organizados en La masonería-como columnas, con solo CSS envolviéndolos en .card-columns. Las tarjetas están construidas con CSS propiedades de columna en lugar de flexbox para facilitar la alineación. Las tarjetas están ordenados de arriba a abajo y de izquierda a derecha.

    Heads up! Su kilometraje con tarjeta de columnas puede variar. Para evitar que las tarjetas de romper a través de las columnas, se debe a display: inline-block como column-break-inside: avoid no es una solución robusta todavía.

    Así, todo lo que tienes que hacer es envolver su .cards en una .card-columns contenedor como este:

    HTML:

    <div class="container">
    <div class="card-columns">
    <div class="card">
    <img class="card-img-top" src="http://via.placeholder.com/1600x900/483D8B/ffffff?text=Card+1" alt="Card image cap">
    <div class="card-body">
    <h5 class="card-title">Card title that wraps to a new line</h5>
    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    </div>
    <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">
    <small class="text-muted">
    Someone famous in <cite title="Source Title">Source Title</cite>
    </small>
    </footer>
    </blockquote>
    </div>
    <div class="card">
    <img class="card-img-top" src="http://via.placeholder.com/1600x450/9400D3/ffffff?text=Card+2" alt="Card image cap">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    </div>
    <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
    <footer class="blockquote-footer">
    <small>
    Someone famous in <cite title="Source Title">Source Title</cite>
    </small>
    </footer>
    </blockquote>
    </div>
    <div class="card text-center">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    </div>
    <div class="card">
    <img class="card-img" src="http://via.placeholder.com/1600x1600/FF1493/ffffff?text=Card+3" alt="Card image">
    </div>
    <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">
    <small class="text-muted">
    Someone famous in <cite title="Source Title">Source Title</cite>
    </small>
    </footer>
    </blockquote>
    </div>
    <div class="card">
    <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
    </div>
    </div>
    </div>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    • Esto funciona para la masonería, pero no responde a la pregunta «utilizando flexbox de cuadrícula».
    • Muchas gracias. Es ahorro de tiempo
    • Esto no funciona perfectamente, por ejemplo, cuando cada uno .la tarjeta tiene .la sombra también. Ver tema aquí: mdbootstrap.com/support/jquery/…

Dejar respuesta

Please enter your comment!
Please enter your name here