1

Mi problema es al generar de manera dinámica columnas del tipo "col-md-4" pero si una se excede de contenido como se ve en la imagen hace que las columnas siguientes se brinquen ese espació.

Lo que busco es que respete el espacio del div de arriba y no se mueva a la derecha. Edito: agrego la estructura de los div's dentro de cada uno es donde agrego el contenido.

<div class="row">
  <div class="clearfix col-md-4">
    <!--contenido del div -->
    </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
  <div class="clearfix col-md-4">
    <!--contenido del div -->
  </div>
</div>

6
  • 1
    Claro, el float funciona así, se colocan donde tiene hueco. Pon el código que tienes, no una imagen.
    – user7176
    Commented el 18 oct. 2016 a las 15:52
  • como bien te comenta @blonfu el float de las columnas hace eso, deberás añadir un clear después de la 3ª columna
    – Zander
    Commented el 18 oct. 2016 a las 15:55
  • @blonfu el código es un <div .row> y dentro se generan los <div .col-md-4> por cada encuesta a través de un ciclo y cuando termina se cierra el row; Commented el 18 oct. 2016 a las 16:00
  • Incluye el código html si la respuesta de abajo no ha solucionado tu problema, porque sino vamos a ciegas
    – Zander
    Commented el 18 oct. 2016 a las 16:03
  • @Cheshire ya edite la pregunta, intente agregar <div class='clearfix'></div> entre cada <div .col-md-4> y los mueve poniéndolos una fila cada uno. Commented el 18 oct. 2016 a las 16:34

3 respuestas 3

1

Gracias a todos por su ayuda, la respuesta es usar el selector :nth-child

@media (min-width:768px) and (max-width: 991px) { .row > div:nth-child(2n+3) { clear: left; } } @media (min-width: 992px) and (max-width: 1199px) { .row > div:nth-child(3n+4) { clear: left; }
} @media (min-width: 1200px) { .row > div:nth-child(4n+5) { clear: left; }
}

aqui les dejo la explicación por si alguien llegara a tener el mismo problema https://stackoverflow.com/a/27053838/5224602

0

Te encontrarás con ese problema cuando las columnas tengan diferente altura. Para solucionarlo con Bootstrap utiliza la clase clearfix con la clase auxiliar tipo visible-resolucion.

Añade justamente delante del div que te sale desordenado el siguiente código:

<div class="clearfix visible-md"></div>

Ese código te lo solucionará en esa resolución en cuestión aplicando un reseteo.

Puede ser que siempre se te vea bien pero al pasar a col-sm sea cuando se te vea mal y ocurra lo mismo, en ese caso tendrás que cambiarlo por

<div class="clearfix visible-sm"></div>
2
  • Gracias pero al ser generados dinamicamente no puedo ponerlo en el ultimo ademas a veces pueden ser mas de 4 encuestas o "div's". Commented el 18 oct. 2016 a las 16:36
  • Puedes hacerlo por medio de condicionales supongo, no??
    – David
    Commented el 18 oct. 2016 a las 17:03
0

Una solución es usar otro div con la clase row

<div class="row">
  <div class="row">
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
  </div>
  <div class="row">
    <div class="clearfix col-md-4">
      <!--contenido del div -->
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.