http://www.bootply.com/somVIZEXxC# Aquí es el bootply para mi sitio web, básicamente quiero que la col col-lg-6 a la misma altura, de modo que las imágenes que tengo dentro de ellos incluso están, por el momento, una imagen que se extiende por debajo de la otra.

De edición: versión Actual http://www.bootply.com/UIWf6q09h4

InformationsquelleAutor TheNoob | 2015-08-04

5 Comentarios

  1. 5

    Contenido debe ser colocado dentro de las columnas, y sólo las columnas pueden ser
    de inmediato los niños de las filas

    Para salir de la h1 de la .row y el conjunto de la clase .row-eq-height a .row como este:

    .row-eq-height{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
    
    <div class="row row-eq-height"></div>

    Aquí la información completa http://getbootstrap.com.vn/examples/equal-height-columns/

    Aquí un mínimo fragmento de código para ilustrar:

    CSS:

    .row-eq-height{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    HTML:

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    
     
    <h1 class="text-center"> Where do we cater to? </h1>
       
    <div class="row row-eq-height">  
      <div class="col-xs-6"> 
        <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive">
      </div>
    
      <div class="col-xs-6" style="background: blueviolet"> 
        <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
      </div>
    </div>

    Como he dicho, no conozco la limitación de su img (altura, si puede ser de fondo, etc.) Aquí algunos consejos para lograr lo que quieres:

    Quitar el margin de row y el relleno de los col-, agregar width: 100% a su imagen como esta:

    CSS:

    .row-eq-height{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 0;
    }
    .row-eq-height [class*="col-"]{
      padding: 0;
    }
    .row-eq-height img{
      width: 100%;
    }

    HTML:

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    
     
    <h1 class="text-center"> Where do we cater to? </h1>
       
    <div class="row row-eq-height">  
      <div class="col-xs-6"> 
        <img src="http://i.stack.imgur.com/gijdH.jpg?s=328&g=1" class="img-responsive">
      </div>
    
      <div class="col-xs-6" style="background: blueviolet"> 
        <img src="http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg" class="img-responsive">
      </div>
    </div>

    Si la imagen puede ser de fondo se puede definir un programa específico proporcional altura puede usar padding-top, digamos de 4:3, que sería 3 * 100 /4 = 75 = padding-top

    Así que usted puede hacer esto:

    CSS:

    .row-eq-height{
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin: 0;
    }
    .row-eq-height [class*="col-"]{
      padding: 0;
    }
    .img-container{  
      background-size: cover;
      padding-top: 75%; /*you can change it to obtain a desired height*/
    }

    HTML:

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
    
     
    <h1 class="text-center"> Where do we cater to? </h1>
       
    <div class="row row-eq-height">  
      <div class="col-xs-6">
        <div class="img-container" style="background-image: url(http://i.stack.imgur.com/gijdH.jpg?s=328&g=1)"></div>
      </div>
    
      <div class="col-xs-6">
        <div class="img-container" style="background-image: url(http://orig00.deviantart.net/0cbb/f/2013/107/3/a/lnd_small_bmp_64x64_by_shadowblitz-d620m47.jpg)"></div>
      </div>
    </div>

    • Este parecía que sólo disminuir el tamaño de una imagen de 1×1 píxeles y disminuir la anchura de la otra por 1 píxel o una pequeña cantidad en que
    • He añadido un mínimo fragmento de código para ilustrar que tanto col- tienen la misma altura, hágamelo saber si funciona para usted.
    • Esto parece funcionar en términos de obtención de las columnas de igual altura, pero, ¿cómo puedo hacer para que mi imagen llena toda la columna? También, ¿cuál es la ventaja de usar xs en lugar de lg?
    • La respuesta por que depende de lo que quieres lograr y no hay tantos respuesta para eso, mira estos: stackoverflow.com/questions/11757537/… , stackoverflow.com/questions/1891857/… , stackoverflow.com/questions/14142378/…
    • triplagent.com lo que quiero en la final es cómo las imágenes se colocan en ese sitio, al lado del otro, sin espacios entre medio y se extendía hasta el borde de la página. Esta captura de pantalla debe ayudar a mostrar lo que quiero decir, i.imgur.com/YB7IY3P.jpg, por lo que la imagen de la derecha es el tamaño de la púrpura de la zona y para las columnas no tienen ningún espacio entre ellos, tenga en cuenta que las imágenes reales son mucho más grandes y parecen ser reducido cuando se pone en la columna
    • No puedo responder en los comentarios, porque la respuesta es un poco larga y editar mi respuesta se puso fuera de contexto de tu pregunta: «¿Cómo hacer bootstrap columnas de la misma altura en una fila?» y de nuevo, depende de lo que quieres lograr, porque no sé cuál debe ser la altura de la imagen? o si se puede poner como fondo, etc. así que mi consejo es que se haga una nueva pregunta de exactamente qué quieres lograr y te ayudamos.
    • Bueno voy a hacer eso, gracias
    • No hay problema, voy a intentar ayudarte, ah por favor no te olvides de marcar la respuesta aceptada si se ajusta a la pregunta: «¿Cómo hacer bootstrap columnas de la misma altura en una fila?» que le informa a los demás de que este problema se ha resuelto.
    • Yo no marca la respuesta sin embargo, las columnas sólo no van en la misma altura para mí, por desgracia. Cuando se utiliza la altura de la revisión, si puedo establecer el máximo de altura a más de 590px la imagen de la derecha/columna comienza a estire hacia abajo y a la izquierda uno sólo dice lo mismo.

  2. 1

    sólo hay que añadir «la igualdad de alturas de» clase a las columnas de los padres

    $('.equal-heights').each(function(){  
        var highestBox = 0;
        $(this).children('[class*="col-"]').each(function(index, el){
            if( $(el).height() > highestBox ) highestBox = $(el).height();
        });  
        $(this).children('[class*="col-"]').css('height',highestBox);
    });

    el html sería como este…

    <div class="row equal-heights">
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
        <div class="col-md-4">...</div>
    </div>

    ver esta pluma…

  3. 0

    Trate de tomar su

    <h1 class="text-center"> Where do we cater to? </h1>

    porque una «fila» está pensado para agregar hasta 12. Ahora, usted tiene este h1 en la fila junto con sus dos col-lg-6, que debe estar en una fila de sus propios (6+6=12).

    El h1 debe estar en su propia fila con su propio col-lg-12, o lo que sea que usted desea.

    • Me he mudado h1 en una nueva fila, parece haber tenido ningún efecto sobre la altura de las imágenes en el col-lg-12
    • Las imágenes deben todavía ser cada uno en su propio col-lg-6 (en una fila), pero el h1 debe ser en su propio col-lg-12 (en la otra fila)
    • mi mal, me han hecho exactamente eso ahora y sigue siendo el mismo que antes
  4. 0

    Hizo probar con max-height:?

    heres una bifurcación del código http://www.bootply.com/wVSqmPKERL

    añade otra fila de las columnas y agregar la clase de height-fix que sólo añade

    un max-height atributo que se puede establecer para cualquier cosa que necesite.

    editar
    También puede combinar esto con min-height si las imágenes son pequeñas

    • Cuando me dices puede establecer el máximo de altura a lo que alguna vez me necesitas, puedo establecer que en css, por ejemplo .col-registro-6{max-height:100%;}, y no puedo configurarlo para que un porcentaje o px?
    • sí configurarlo para que la columna es por eso que he añadido a la clase height-fix así que usted sólo se extiende fuera de la columna de la clase en lugar de directamente a la edición de la misma y sí uso px aquí tienes algo de información sobre ella css-tricks.com/almanac/properties/m/max-height
    • esto no parece cambiar nada, incluso si se establece una altura máxima de 1px las imágenes permanecen en la página uneffected
    • usted tiene que fijar max-height a las columnas que las imágenes están en
    • Me puse el max-altura .col-lg-6, que es el de las columnas en que se encuentren, he intentado varias alturas, pero sigue siendo el mismo. Edit: cuando me reemplazar el uso style= la imagen desaparece
    • es usted el uso de la horquilla que he enviado a vosotros? acaba de cambiar el max-altura en la nueva clase que he añadido llama altura-fix
    • Mi mal, he añadido altura-fix en mi css y trabaja en el cambio de las alturas, sin embargo cuando hago sus alturas a un punto donde no hay espacio entre las dos imágenes (consulte triplagent.com y desplácese hacia abajo para ver el efecto que quiero lograr) una columna/la imagen es más grande que el otro
    • Compruebe @Yandy_Viera la respuesta de su parece hacer exactamente lo que usted necesita, a continuación,

  5. 0

    Aquí es una cuadrícula de respuesta con imágenes. La imagen contenedores tienen la misma altura y el de las mismas imágenes de son centrada verticalmente;

    CSS:

    .grid {
      margin-top: 25px;
      display: flex;
      flex-wrap: wrap;
    }
    
    .grid>[class*='col-'] {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 15px;
    }
    
    .grid img {
      margin: auto 0;
    }
    
    @media (max-width: 767px) {
      .container {
        max-width: 100%;
      }
    }
    
    @media (max-width: 575px) {
      .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
      }
      .posts-grid>[class*='col-'] {
        padding-left: 5px;
        padding-right: 5px;
      }
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
    
     <div class="container-fluid">
      <div class="grid">
        <div class="col-sx-6 col-md-4 col-lg-2">
          <img src="http://placehold.it/350x300" class="img-responsive">
        </div>
        <div class="col-sx-6 col-md-4 col-lg-2">
          <img src="http://placehold.it/350x450" class="img-responsive">
        </div>
      </div>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here