1

Estoy intentando hacer un portafolio y quiero que una columna sea más grande que otras 4. El problema es que Bootstrap me define ya la altura de la más grande, y no deja me pasa que las dos últimas columnas no se alinean con las de arriba y se baja hasta la grande introducir la descripción de la imagen aquí

Lo que quiero que pase lo he señalado. ¿Alguien me puede decir porque Bootstrap define la altura? y ¿cómo puedo ajustarla?introducir la descripción de la imagen aquí

<section class="all">

<div class="section-1">
    <div class="container">
        <div class="row">
            <article class="position-relative mb-2 col-md-5">
                                   <a href="#">
                       <img src="img/wood-anemone-5005120_640.jpg" class="img-fluid rounded">
                   </a>
            </article>
            
                        <article class="position-relative mb-2 col-md-3 ">
                                   <a href="#">
                       <img src="img/chicks-5014152_640.jpg" class="img-fluid rounded">
                   </a>
            </article>
            
                                    <article class="position-relative mb-2 col-md-3">
                                   <a href="#">
                       <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
                   </a>
            </article>

                                <article class="position-relative mb-2 col-md-3">
                                   <a href="#">
                       <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
                   </a>
            </article>
                                    <article class="position-relative mb-2 col-md-3">
                                   <a href="#">
                       <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
                   </a>
            </article>


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

</section>  

5
  • ¿Al menos podrías mostrar el código de lo que has intentado? Si las imágenes de la parte alta están en una fila diferente que las de la parte baja, pues nunca lograrás lo que parece que intentas. Si vas a usar propiedades de flexbox como las que dices que quieres, tal vez Bootstrap y su sistema de grilla no sean lo adecuado. Saludos el 14 abr. 2020 a las 11:18
  • Hasta donde yo sé, la altura no la define Boostrap, simplemente las imágenes ocupan su tamaño por defecto. Puedes modificar estos valores a las imágenes con una clase y poniendo un max-height, sin embargo, existen propiedades por defecto: w3schools.com/css/css3_images.asp
    – EduBw
    el 14 abr. 2020 a las 11:23
  • Acabo de añadir el código que he utilizado. Lo que deseo hacer es esto: imgur.com/a/q6omZUe
    – Ruben
    el 14 abr. 2020 a las 11:24
  • row -> col-md-6 (imagen), col-md-6 (col-md-6 y col-md-6) , (col-md-6 y col-md-6). Lo que tienes que hacer es declarar un row y dentro de él, 2 col de 6, al 1º de 6º simplemente le pones la imagen, y al 2º col de 6, le pones 4 col de 6.
    – EduBw
    el 14 abr. 2020 a las 11:27
  • He hecho dos columnas de 6, en la primera he puesto la foto y en la otra he puesto 4 col de 3 pero se ponen una debajo de la otra como en la imagen imgur.com/a/BKuGMxX cuando lo que quiero hacer es esto imgur.com/a/q6omZUe
    – Ruben
    el 14 abr. 2020 a las 11:47

2 respuestas 2

1

Desconozco lo que hacen tus clases de css, debería funcionarte de esta manera:

Lo que le dices es que en 1 fila (row) tendrás 2 bloques (una grande a la izquierda, y otro grande a la derecha.) Dentro del bloque de la izquierda, simplemente, ponle la imagen. Dentro del bloque a la derecha, tendrás que hacer varios bloques, para ello, sigue la misma lógica y divide la mitad de su contenido en 2 de 6.

<section class="all">

<div class="section-1">
    <div class="container">
        <div class="row">
            <article class="col-md-6"> <!-- Imagen grande de la izquierda -->
                   <a href="#">
                       <img src="img/wood-anemone-5005120_640.jpg" class="img-fluid rounded">
                   </a>
            </article>

            <article class="col-md-6 "> <!-- Imágenes de la derecha-->

              <article class="col-md-6"> <!-- Imagen arriba izq -->
                  <a href="#">
                       <img src="img/chicks-5014152_640.jpg" class="img-fluid rounded">
                   </a>
            </article>

           <article class="col-md-6"> <!-- Imagen arriba derecha -->
                   <a href="#">
                       <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
                   </a>
            </article>

            <article class="col-md-6"> <!-- Imagen debajo izq -->
                  <a href="#">
                       <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
                   </a>
            </article>

             <article class="col-md-6"> <!-- Imagen debajo derecha -->
                <a href="#">
                 <img src="img/background-4825512_640.jpg" class="img-fluid rounded">
              </a>
            </article>

        </article>  <!-- Fin imágenes derecha -->
        </div>
    </div>
</div>

</section>  
3
  • He hecho dos columnas de 6, en la primera he puesto la foto y en la otra he puesto 4 col de 3 pero se ponen una debajo de la otra como en la imagen imgur.com/a/BKuGMxX cuando lo que quiero hacer es esto imgur.com/a/q6omZUe
    – Ruben
    el 14 abr. 2020 a las 11:46
  • Ya lo he modificado, déjalo simplemente con los col-de 6
    – EduBw
    el 14 abr. 2020 a las 11:50
  • Si quieres usar espacios entre las imágenes, usa paddings, pero no uses coles como espacios --> Si usas mb-2, provocas que si el elemento no cabe, se desplace hacía abajo, piensa que una línea tiene 12 coles, si quieres 2 elementos, 6 y 6, pero si pones col-6 espacio 2 y col 6, el 2º col de 6 te baja porque no cabe, esto es provocado porque 6+2 son 8 y 8+6 = 14, por lo tanto, el 2º elemento te baja.
    – EduBw
    el 14 abr. 2020 a las 11:54
0

hice una prueba a ver que opción se me ocurría y fué la siguiente:

Hice la clase CSS llamada img-responsive, le puse un largo fijo y le apliqué object-fit para que la img no se deforme y object-position para que la img esté centrada.

   .img-responsive {
      width: 100%;
      height: 300px;
      object-fit: cover;
      object-position: center;
    }

HTML con la clase personalizada puesta, espero que te sea de utilidad.

<section class="all">
    <div class="section-1">
      <div class="container">
        <div class="row">

          <article class="position-relative mb-2 col-md-5">
            <a href="#">
              <img src="img/wood-anemone-5005120_640.jpg" class="img-fluid rounded img-responsive">
            </a>
          </article>

          <article class="position-relative mb-2 col-md-3 ">
            <a href="#">
              <img src="img/chicks-5014152_640.jpg" class="img-fluid rounded img-responsive">
            </a>
          </article>

          <article class="position-relative mb-2 col-md-3">
            <a href="#">
              <img src="img/background-4825512_640.jpg" class="img-fluid rounded img-responsive">
            </a>
          </article>

          <article class="position-relative mb-2 col-md-3">
            <a href="#">
              <img src="img/background-4825512_640.jpg" class="img-fluid rounded img-responsive">
            </a>
          </article>

          <article class="position-relative mb-2 col-md-3">
            <a href="#">
              <img src="img/background-4825512_640.jpg" class="img-fluid rounded img-responsive">
            </a>
          </article>

        </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.