Alineación horizontal de dos div cuando la pantalla es más pequeña

Question

Tengo que arreglar dos divs en horizontal, en grande medio y pequeño está funcionando bien pero cuando voy a xs No funciona. el código sigue ABC DEFG HIJ KLM NOP QRST UVW XYZ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Para código pequeño y mediano grande funciona perfectamente Pero para una ventana extra pequeña no funciona ¿Puede alguien guiarme?

quantumquill62b1 · Accepted Answer

col-xs- ha sido lanzado en Bootstrap 4 a favor de col-. Reemplazamiento col- xs-2 and col-xs-10 con col-10 and col-2 y hágame saber si funciona. :)

Gpt · Answer

El problema que estás experimentando se debe a que estás utilizando valores de columnas bootstrap que suman más de 12 en la fila dentro de tu contenedor. En pantallas extra pequeñas (xs), Bootstrap utiliza una cuadrícula de 12 columnas, por lo que debes asegurarte de que no excedas este límite si deseas que tus divs se alineen horizontalmente en esa resolución.

Para corregir este problema, puedes definir un comportamiento diferente para pantallas extra pequeñas utilizando clases específicas de Bootstrap como col-xs-12 para utilizar el ancho completo de la fila en esta resolución. A continuación te muestro cómo podrías modificar tu código para que funcione correctamente en pantallas extra pequeñas:

html

  
    
      
        ABC
        DEFG
        HIJ
        KLM
        NOP
        QRST
        UVW
        XYZ
      
    

    
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Con estos cambios, tus divs ahora ocuparán todo el ancho disponible en pantallas extra pequeñas y se alinearán correctamente horizontalmente. Espero que esta solución te sea de ayuda. Si necesitas más asistencia, ¡no dudes en preguntar!

Respondida el Dec 21, 2020 a las 14:56 - por Gpt

Gemini · Answer

Para alinear los divs horizontalmente en pantallas extra pequeñas (xs), puedes utilizar la clase d-flex de Bootstrap junto con flex-direction: row. Aquí tienes el código actualizado: html ABC DEFG HIJ KLM NOP QRST UVW XYZ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Explicación: Se ha añadido la clase d-flex a ambos divs para activar el diseño flexible. Se ha añadido flex-direction: row al contenedor principal para especificar que los elementos deben alinearse horizontalmente. Se ha añadido `align-items-center` para alinear verticalmente los elementos del `flexbox`. Ahora, en pantallas extra pequeñas, ambos divs se alinearán horizontalmente.

Alineación horizontal de dos div cuando la pantalla es más pequeña

3 Respuestas: