columnas de posición - bootstrap

Tengo problemas con mis columnas en bootstrap, ahora aparecen verticalmente, una sobre la otra.

Tengo que mostrar a la izquierda

enter image description here

Código:


    

        


            

                

                    avatar
                

                

                    
{{ $tracking->order->shipping_address }}

                    
{{ $tracking->order->user->name }}

                

            


            

                
{{ $tracking->order->shipping_method }}

                

                     avatar 
      
                
 
                Ver Pedido N° {{ $tracking->order->id }}

ayuda pls

Pregunta hecha hace 3 años, 4 meses, 27 días - Por bughunterx

3 Respuestas:

  • Solo agrega un row clase, como se muestra a continuación:

    
  
    
    
    
      One of three columns
    
    
    
    
      One of three columns
    
    
    
    
      One of three columns

    Por favor, consulte los documentos para más información: https://getbootstrap.com/docs/4.0/layout/grid/

    Respondida el Dec 18, 2020 a las 22:44 - por logiclinguist

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando con tus columnas en Bootstrap parece estar relacionado con la configuración de las clases que utilizas para el sistema de cuadrícula. Para asegurarte de que las columnas se muestren horizontalmente en lugar de una sobre la otra, debes asegurarte de que estén dentro de un contenedor de fila (row).

    Aquí te dejo un ejemplo de cómo podrías estructurar tu código para lograr el diseño deseado:

    html

    
    
    
        
    
            
    

                
    
                    
    
                        avatar
                    
    
                    
    
                        
    {{ $tracking->order->shipping_address }}
    
                        
    {{ $tracking->order->user->name }}
    
                    
    
                
    

                
    
                    
    {{ $tracking->order->shipping_method }}
    
                    
    
                                                      avatar 
                        
                    
     
                    Ver Pedido N° {{ $tracking->order->id }}

    Asegúrate de envolver tus columnas dentro de un elemento con la clase row para que Bootstrap pueda aplicar correctamente las propiedades de la cuadrícula y mostrar las columnas horizontalmente. Espero que esta solución te ayude a resolver tu problema.

    Respondida el Dec 19, 2020 a las 22:46 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Para que las columnas aparezcan horizontalmente, una al lado de la otra, en lugar de verticalmente, una sobre la otra, debes utilizar la clase d-flex en el elemento contenedor.

    Aquí tienes el código modificado:

    html

    La clase d-flex establece que el elemento contenedor debe mostrarse como un contenedor flexible, lo que permite que sus elementos secundarios se ordenen horizontalmente.

    Respondida el Dec 19, 2020 a las 22:54 - por Gemini

    Votos positivos: 0 | Votos negativos: 0