1

Me sucede esto:

me pasa esto

Necesito hacer esta distribución con Bootstrap y la altura de los banner de la derecha se me desordena cuando cambio de pantalla. Mi problema es que el alto de las 2 filas de la derecha se me desordenan.

¿Cómo arreglo eso?

El código es el siguiente (presionar botón de "Página completa" para ver el problema):

.primer_banner {
  background: #eee;
}

.segundo_banner {
  background: #bdf
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="first-section">
  <div class="container">

    <!-- Carrousel -->

    <!--<div class="col-md-12">-->
    <div class="col-md-7">
      <div class="row">
        <div id="carousel-1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-1" data-slide-to="1"></li>
            <li data-target="#carousel-1" data-slide-to="2"></li>
          </ol>

          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="https://placehold.it/800x400/a00" class="img-responsive" alt="paisaje1">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="https://placehold.it/800x400/0a0" class="img-responsive" alt="paisaje2">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="https://placehold.it/800x400/00a" class="img-responsive" alt="paisaje3">
              <div class="carousel-caption">

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

    <div class="col-md-5" id="banner_derecha">
      <div class="row">
        <div class="primer_banner col-xs-12 col-sm-6 col-md-12 col-lg-12">
          <h4>banner1</h4>
          <h6>Realizalos de manera mas simple</h6>
          <!--enlace-->
          <a href="">AQUI</a>

        </div>
        <div class="segundo_banner col-xs-12 col-sm-6 col-md-12 col-lg-12">
          <h4>banner2<br> igualar alto</h4>
        </div>
      </div>
    </div>

    <!--  </div>-->
  </div>
</section>

3
  • 1
    Hola Karla , bienvenida a SOes , sería genial que compartieras el código que produce la imagen para saber como y en que parte del código ayudar.
    – Dev. Joel
    Commented el 26 sept. 2017 a las 5:51
  • 2
    Depende de que versión de Bootstrap uses. Si estás con la 3.X o inferior, bootstrap usa floats, por lo que no puedes tener una altura igual (a menos que uses javascript). En cambio, Bootstrap 4.0 usa flexbox, una propiedad en alza que hace que los divs que antes eran floats, sean ahora flex y ocupen el mismo espacio vertical que el contenido más alto.
    – Zander
    Commented el 26 sept. 2017 a las 16:29
  • 1
    Bienvenido al sitio Karla!, es importante realizar los consejos de los demás usuarios. Es importante realices el recorrido de bienvenida para conocer el funcionamiento básico del sitio (y obtendrás tu primera medalla). Además es muy importante revisar Cómo preguntar que te da brinda información para realizar una buena pregunta, esta sea bien recibida en la comunidad y de esta forma obtengas buenas respuestas!.
    – Jorgesys
    Commented el 26 sept. 2017 a las 17:35

1 respuesta 1

1

Podrías cambiar los estilos de los contenedores para utilizar flexbox, de ese modo harías que el contenedor del carrusel tenga un display: flex permitiendo que #banner_derecha ocupe el 100% del alto. A partir de ahí, podrías volver a usar flex (con flex:1) para el .row y los banners de la derecha o, como ya hay un alto definido, simplemente especificar un alto del 50% para cada uno de ellos.

Aquí puedes ver esta opción funcionando:

section.first-section {
  display: flex;
}

#banner_derecha {
  height: 100%;
}

#banner_derecha > .row {
  height: 100%;
}

.primer_banner {
  background: #eee;
  height:50%;
}

.segundo_banner {
  background: #bdf;
  height:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<section class="first-section">
  <div class="container">

    <!-- Carrousel -->

    <!--<div class="col-md-12">-->
    <div class="col-md-7">
      <div class="row">
        <div id="carousel-1" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-1" data-slide-to="1"></li>
            <li data-target="#carousel-1" data-slide-to="2"></li>
          </ol>

          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="https://placehold.it/800x400/a00" class="img-responsive" alt="paisaje1">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="https://placehold.it/800x400/0a0" class="img-responsive" alt="paisaje2">
              <div class="carousel-caption">

              </div>
            </div>
            <div class="item">
              <img src="https://placehold.it/800x400/00a" class="img-responsive" alt="paisaje3">
              <div class="carousel-caption">

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

    <div class="col-md-5" id="banner_derecha">
      <div class="row">
        <div class="primer_banner col-xs-12 col-sm-6 col-md-12 col-lg-12">
          <h4>banner1</h4>
          <h6>Realizalos de manera mas simple</h6>
          <!--enlace-->
          <a href="">AQUI</a>

        </div>
        <div class="segundo_banner col-xs-12 col-sm-6 col-md-12 col-lg-12">
          <h4>banner2<br> igualar alto</h4>
        </div>
      </div>
    </div>

    <!--  </div>-->
  </div>
</section>

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.