Usando Bootstrap v4alpha y estoy tratando de diseño de 24 imágenes w/caption debajo de la cuadrícula. Vamos a llamar a un mosaico de una imagen con su título.

1) quiero que los azulejos estén alineados verticalmente y horizontalmente, como tendríamos si el uso de un < table > etiqueta alinear arriba y a la izquierda. Mis imágenes son del mismo tamaño, pero el título de la longitud varía.

2) el número de columnas que se ajusta de acuerdo con el tamaño de la pantalla. En una pantalla pequeña, tendríamos 2 columnas y 12 filas. En medio de la pantalla de 3 columnas por 4 filas. En una gran pantalla de 4 columnas y 3 filas.

He probado el Tarjetas De Columnas y es casi lo que necesito, a excepción de la mampostería mirada. Quiero que ellos también se alinean en filas.

También probé el Opciones De La Cuadrícula con col-sm-6, col-md-4, y el col-lg-3 sin embargo, el problema radica en el hecho de que yo tenga que envolver un número fijo de azulejos dentro de una etiqueta < div class=»fila» >.

Este problema también existe en las versiones anteriores de Bootstrap, pero si no hay una solución específica para la v4, me gustaría saber también.

  • No entiendo la pregunta, si desea que su fila para ser contenida en x número de columnas, no puedes envolver la fila div en un col-tamaño-x div?
  • Que no necesita utilizar .row. Si no, su columna se envuelva como usted lo espera.
  • por favor podría darme un ejemplo de lo que significaba?
  • si no tengo una .fila, no se envuelva tipo de forma aleatoria? todos los col-* necesidad de agregar hasta 12 para controlar cuántas baldosas hay en cada fila, a la derecha?
  • No estoy seguro de que entiende su preocupación correctamente, pero he tratado de responder a continuación. Por favor, hágamelo saber si eso no es lo que se preguntaba acerca de.
InformationsquelleAutor Quoc Vu | 2016-03-25

1 Comentario

  1. 13

    Sólo puede envolver todos los .col-*-* con uno solo <div class="row">...</div>. Su contenido se ajustará cuando sea necesario.

    Ahora, en cuanto a tu otra pregunta: Usted no necesita para asegurarse de que hay exactamente en 12 columnas en cada fila para cada tamaño de pantalla. Si una columna no cabe más (por ejemplo, usted tiene .col-*-11 y, a continuación,.col-*-2) va a ir a la fila siguiente de forma automática, incluso si la primera fila no es 100% completo.

    Otro ejemplo tomado de la La documentación de Bootstrap

    <div class="row">
      <div class="col-9">.col-9</div>
      <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
      <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
    </div>

    Aquí .col-4 introduciría columnas 10-13, pero dado que sólo hay 12 columnas, todo div pasa a la siguiente fila.

    Bootstrap 4

    hice un violín a mostrar, cómo funcionaría en Bootstrap 4. v4 del sistema de la red se basa en flexbox y en flexbox un elementos crecerá el uso de todo el espacio vertical disponible. Esto significa que en una fila de columnas, cada columna será tan alto como el edificio más alto de la columna.

    Esta es una gran diferencia para Bootstrap 3 y significa que no hay necesidad de compensar a las distintas alturas de los contenidos.

    Bootstrap 3

    Originalmente basado en mi respuesta en Bootstrap 3 y hay un par de diferencias, así que voy a mantener que la respuesta original (ligeramente modificada) aquí, así como para cualquiera que la necesite.

    En Bootstrap 3, se puede omitir el .row por completo y utilizar .container como el padre de todos los .col-*-*.

    Usted puede comprobar fuera de este violín para ver la diferencia entre el uso de .row y no mediante .row para el diseño de una cuadrícula de imágenes. Simplemente ajustar el ancho de los resultados del marco y desplácese hacia abajo para ver la diferencia cuando hay 3 imágenes en una fila. Por supuesto, también puede utilizar un único .row a poner todo su .cols en el interior.

    De compensación para los diferentes contenidos de la altura de

    Sin embargo, dado que Bootstrap 3 utiliza flotadores en lugar de flexbox, este presenta el problema de que si las columnas no son de la misma altura, la columna siguiente podría empezar a la derecha de la más alta elemento de la columna anterior, cuando quieras iniciar en la parte izquierda de la pantalla. Así que con el fin de impulsar un elemento por debajo de todos los elementos anteriores, es necesario aclarar que estas balsas.

    Bootstrap 3 proporciona una clase para esto, sólo puede insertar <div class="clearfix"> siempre que desea borrar de la flota. Además, usted tendrá que ocultar que el div para screensizes donde usted no desea borrar la flota, puede utilizar las clases .hidden-* para lograr que.

    <div class="container">
      <div class="col-sm-6 col-md-4 col-lg-3">
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
      </div>
    
      <!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
      <div class="clearfix hidden-md hidden-lg"></div>
    
      <div class="col-sm-6 col-md-4 col-lg-3">
      </div>
    
      <!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
      <div class="clearfix hidden-sm hidden-lg"></div>
    
      <div class="col-sm-6 col-md-4 col-lg-3">
      </div>
    </div>

    De nuevo, he hecho una violín para mostrar todo esto en acción.

    • Gracias @mmgross. Que ejemplo se ve bien con todos los azulejos del mismo tamaño. En mi caso, tienen el mismo ancho, pero no de la misma altura, a continuación, se envuelven de una manera extraña. Por ejemplo:
    • Gracias @mmgross. Que ejemplo se ve bien con todos los azulejos del mismo tamaño. En mi caso, tienen el mismo ancho, pero no de la misma altura, a continuación, se envuelven de una manera extraña. Por ejemplo, he modificado el código y se puede ver el problema cuando muestra 3 columnas jsfiddle.net/quocvu/66t6hbkf/2
    • Muchas gracias @mmgross. Esa es una manera muy inteligente de usar el oculto-* las clases. Funciona como un encanto 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here