1

Estoy tratando de hacer un diseño responsivo, pero me atoré en el el tamaño col-sm de boostrap ordené este comportamiento

<div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div class="infra-main-view">

            </div>
        </div>
    </div>

La instrucción es, que cuando sea una pantalla de PC (por lo general col-lg y col-md) el row se parta en 3, pero si es pantalla de tablet se debe de partir en 2 y si es más pequeño en una sola vista. introducir la descripción de la imagen aquí

El problema es que me cuando simulo la tablet me deja un espacio en blanco, obviamente, lo que quiero es que pueda mezclar los rows en ese caso y se pongan de 2 en 2.

introducir la descripción de la imagen aquí

Cómo puedo hacer eso.

1
  • El problema es que usas un <div class="row"> para cada 3 elementos, con lo que fuerzas a que cada fila sea de 3. Si esta fila no cabe, se parte en una "subfila" de 2 elementos y otra de 1. Junta todos los elementos dentro del mismo div y deja que sea su número de columnas quien distribuya los elementos. Commented el 31 ago. 2017 a las 9:28

3 respuestas 3

4

Tu tienes ahora mismo:

apertura row
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
cierre row

apertura row
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
cierre row

apertura row
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
cierre row

Y cada vez que se cierra un row, bootstrap salta a la fila siguiente, independientemente de que el row esté lleno.

lo ideal sería:

apertura row
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
col-lg-4 col-md-4 col-sm-6 col-xs-12
cierre row

Para que entiendas mejor lo que pasa, prueba a meter un solo col-lg-4 col-md-4 col-sm-6 col-xs-12 por cada row y verás que quedan en filas distintas

Y como consejo te recomiendo que las clases col-... las pongas siempre de menor a mayor =)

1
  • Me apoyas a clarificar con la idea con un snippet de favor? no entiendo lo que me pusiste muy bien. Gracias. Commented el 30 ago. 2017 a las 5:01
2

Buenas tardes,

  • Lo primero, tienes que tener los todas las columnas en el mismo .row
  • Para ver en móvil y tablet en una columna .col-sm-12 y .col-xs-12

A tu tu código he añadido un .container-fluid para que lo visualices mejor a pantalla completa; además de un color de fondo y una altura a .infra-main-view para que se visualicen las columnas.

Ejecuta, dale a Página completa y redimensiona tu navegador. Dime si es lo que buscas. Gracias!

.infra-main-view {
  background-color: red;
  height: 200px;
  margin-bottom: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" />
<!-- http causes a security issue and css is not applied -->

<div class="row">

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="infra-main-view">

    </div>
  </div>
  
  
</div>

4
  • Gracias, pero eso no me sirve, me esta poniendo un div a como si fuera col-lg-12 y eso no lo necesito. Commented el 30 ago. 2017 a las 5:00
  • Alberto, te he modificado el código. Si quieres que en tablets se vea en dos columnas has de usar .col-sm-6´ prueba ahora a ver que tal. Commented el 31 ago. 2017 a las 6:52
  • 2
    El problema era la inclusión de bootstrap.css, al ser "cross-origin" no se aplicaban los estilos a menos que el link fuese https://... en lugar de http://... Commented el 31 ago. 2017 a las 9:24
  • Gracias @Pablo Lozano, buena sugerencia. Commented el 1 sept. 2017 a las 12:12
0

EL error es que tienes los bloques metidos en rows de tres en tres. cuando un row termina, salta la linea al siguiente row. Si te fijas siempre es el tercer div de cada row el que se queda solo...

Crea un row y mete todos los bloques dentro y te funcionará =).

1
  • 1
    Puedes ser más específico, me podrías dar un pequeño ejemplo. Gracias Commented el 26 ago. 2017 a las 17:59

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.