1

Estoy realizando una página web en la cual tengo tengo un una clase row que contiene diferentes columnas, como se muestra en el código:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12" style="margin-bottom: -3%;">
    <p class="shoppTitleform" style="color: #ff9012 !important">¿Qué Shopper eres tú?</p>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Amigo?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra supermercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Horario rotativo</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <img src="https://placehold.it/300x200/" alt="" style="width: 20%">
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Vecino?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra minimercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Eliges tu horario</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
</div>

El problema es que las columnas md6 ocupan un espacio mayor y no se muestran una al lado de la otra si no que se muestran una debajo de otra:

introducir la descripción de la imagen aquí

Como se ven el a imagen la segunda columnas md6 pasa a bajo en vez de estar al lado. ¿Cómo puedo corregir ese error? Cabe mencionar que estoy trabajando con Angular.

Éste es el resultado deseado:

introducir la descripción de la imagen aquí

0

2 respuestas 2

1

Éste es un problema relativamente común al migrar de Bootstrap 3 a Bootstrap 4.

En Bootstrap 3, el sistema de grid se basa en columnas flotantes con un ancho definido (se puede ver en el código no minificado de Bootstrap 3). Así, aunque tuvieras columnas directamente dentro de otras columnas -que no es lo recomendado- se seguirían dividiendo bien.

Por eso con la versión 3 de Bootstrap, tu código sin cambios funciona bien:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12" style="margin-bottom: -3%;">
    <p class="shoppTitleform" style="color: #ff9012 !important">¿Qué Shopper eres tú?</p>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Amigo?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra supermercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Horario rotativo</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <img src="https://placehold.it/300x200/" alt="" style="width: 20%">
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Vecino?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra minimercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Eliges tu horario</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
</div>

Ahora, en Bootstrap 4 se cambió el sistema de grid y pasó a usarse flexbox: el .row tiene display:flex y las columnas tienen un flex que indica el ancho (se puede ver en el código no minificado de Bootstrap 4).

Así, para evitar que las columnas se pongan unas encima de las otras en lugar de unas al lado de las otras (el problema que estás viendo), debes siempre tener un .row como contenedor (o padre) de las columnas, como se indica en la documentación (traducción mía):

Para anidar tu contenido con el grid por defecto, añade un nuevo .row y grupo de columnas .col-sm-* dentro de la columas .col-sm-* ya existente. Las filas anidadas deberían incluir un grupo de columnas que sumen 12 o menos (no es necesario que uses todas las 12 columnas disponibles).

La solución entonces sería hacer lo que te sugiere Armando en su respuesta: añadir un .row dentro de las columnas que van a ser subdivididas en más columnas:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12" style="margin-bottom: -3%;">
    <p class="shoppTitleform" style="color: #ff9012 !important">¿Qué Shopper eres tú?</p>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="row">
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <p class="shoppTitleform typeShopp">¿Shopper Amigo?</p>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra supermercado</p>
        </div>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Horario rotativo</p>
        </div>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
        </div>
        <img src="https://placehold.it/300x200/" alt="" style="width: 20%">
      </div>
      <div class="col-md-12 col-xs-12 col-sm-12">
        <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
      </div>
    </div>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="row">
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <p class="shoppTitleform typeShopp">¿Shopper Vecino?</p>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra minimercado</p>
        </div>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Eliges tu horario</p>
        </div>
        <div class="row">
          <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12">
          <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
        </div>
        <div class="col-md-6 col-xs-12 col-sm-12">
          <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
        </div>
      </div>
      <div class="col-md-12 col-xs-12 col-sm-12">
        <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
      </div>
    </div>
  </div>
</div>

Otra opción sería añadir la clase row a la columna que va a contener más columnas, aunque quizás no sería la más recomendada porque podría generar problemas con los padding y la separación entre las columnas:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-md-12 col-xs-12 col-sm-12" style="margin-bottom: -3%;">
    <p class="shoppTitleform" style="color: #ff9012 !important">¿Qué Shopper eres tú?</p>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12 row">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Amigo?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra supermercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Horario rotativo</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <img src="https://placehold.it/300x200/" alt="" style="width: 20%">
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
  <div class="col-md-6 col-xs-12 col-sm-12">
    <div class="col-md-6 col-xs-12 col-sm-12">
      <img src="https://placehold.it/300x200/" alt="" style="width: 100%">
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
      <p class="shoppTitleform typeShopp">¿Shopper Vecino?</p>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra minimercado</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Eliges tu horario</p>
      </div>
      <div class="row">
        <p class="descriptTypeShopp" style="color: #666;float: left;    font-size: 2em;">Compra y entrega</p>
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
      <div class="col-md-6 col-xs-12 col-sm-12">
        <img src="https://placehold.it/300x200/" alt="" style="width: 40%">
      </div>
    </div>
    <div class="col-md-12 col-xs-12 col-sm-12">
      <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Registrame</button>
    </div>
  </div>
</div>

1
  • muchas gracias por compartir tu respuesta, me ayudo mucho. saludos Commented el 2 jul. 2018 a las 14:13
1

Prueba agregando un contenedor y div.row independientes:

<div class="container">
<div class="row">
    <div class="col-md-12 col-xs-12 col-sm-12" style="margin-bottom: -3%; text-align: center;">
        <p class="shoppTitleform" style="color: #ff9012 !important">Lorem ipsum dolor</p>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-xs-12 col-sm-12">
        <div class="row">
            <div class="col-md-6 col-xs-12 col-sm-12">
                <img src="#" alt="" style="width: 100%">
            </div>
            <div class="col-md-6 col-xs-12 col-sm-12">
                <p class="shoppTitleform typeShopp" >Lorem ipsum dolor</p>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <img src="#" alt="" style="width: 20%">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12" style="text-align: center;">
                <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()" >Lorem ipsum dolor</button>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xs-12 col-sm-12">
        <div class="row">
            <div class="col-md-6 col-xs-12 col-sm-12">
                <img src="#" alt="" style="width: 100%">
            </div>
            <div class="col-md-6 col-xs-12 col-sm-12">
                <p class="shoppTitleform typeShopp">Lorem ipsum dolor</p>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <div class="row">
                    <p class="descriptTypeShopp" style="color: #666;float: left; font-size: 2em;">Lorem ipsum dolor</p>
                </div>
                <div class="col-md-6 col-xs-12 col-sm-12">
                    <img src="#" alt="" style="width: 40%">
                </div>
                <div class="col-md-6 col-xs-12 col-sm-12">
                    <img src="#" alt="" style="width: 40%">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 col-xs-12 col-sm-12" style="text-align: center;">
                <button class="btn_shopper btnReg btnmovilReg" onclick="scrollWin()">Lorem ipsum dolor</button>
            </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.