1

Quiero empezar a alinear varios divs a la derecha del contenedor grande pero por tal y como están alineados me pasa esto. A ver si me podéis echar un cable.

introducir la descripción de la imagen aquí

El código de los contenedores es el siguiente:

Código bloques Bootstrap

        <div class="row" style="background-color:transparent well">

        <div id="contenedorizda-gl" class="col-12 col-sm-12 col-md-12 col-xl-8 mt-3 mb-3">

        <h1>Contenedor Global Izq</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque mauris dolor, et consectetur turpis laoreet nec. Donec consectetur nulla vitae neque cursus lacinia. Cras a libero dolor. Aliquam vitae massa felis. Praesent diam risus, vestibulum vel leo sit amet, egestas imperdiet velit. Duis euismod velit at scelerisque tincidunt. Vestibulum mollis id neque ut pretium. Aenean condimentum lorem sem, eu pellentesque orci sodales vitae.</p>

        </div>

        <div id="contenedordcha-gl" class="col-12 col-sm-12 col-md-12 col-xl-3 offset-xl-1 center-block mt-3 mb-3"><h1>Contenedor Global Dcha</h1></div>

        <div id="contenedordcha-gl" class="col-12 col-sm-12 col-md-12 col-xl-3 offset-xl-9 center-block mb-3"><h1>Contenedor Global Dcha</h1></div>


    </div>


</div>
2
  • ¿Cómo necesitarías que quedase?
    – phpMyGuel
    Commented el 5 oct. 2018 a las 10:08
  • Necesitaría que el contenedor de la derecha de abajo estuviese alineado también con el de la izquierda, no debajo como si fuera otra row.
    – Aitor Sola
    Commented el 5 oct. 2018 a las 10:20

1 respuesta 1

0

lo que hice fue colocar un nivel superior, es decir coloque dos columnas principales que ocuparan el 50%, es decir dos de col-6 cada una y a la izquierda coloque el bloque grande y a la derecha coloque los otros dos pequeños:

div[class^="col-"]{
 border:1px solid red;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">     
     
<div class="container">     
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
        <div class="col-12">
          <h1>TITULO</h1>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Espero que sea lo que andas buscando.

2
  • Es justamente lo que andaba buscando, gracias!!!
    – Aitor Sola
    Commented el 5 oct. 2018 a las 10:32
  • Que bueno, estamos a la orden Commented el 5 oct. 2018 a las 10:33

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.