5

Estoy creando un sitio web para una compañía en este link. Sin embargo cada recuadro se desacomoda si ingresan el nombre de una propiedad con más de 2 renglones.

Intenté solucionarlo con un white-space:nowrap y se acomodaron, pero obviamente no es lo correcto porque las palabras se superponen.

2
  • 2
    Deberías añadir el código relevante a la pregunta en la propia pregunta. El enlace que compartes puede cambiar en cualquier momento o romperse, y entonces la pregunta dejaría de tener sentido. Te recomendaría que le echaras un ojo a Cómo crear un ejemplo mínimo, completo y verificable en el centro de ayuda.
    – Alvaro Montoro
    Commented el 10 ago. 2016 a las 3:44
  • @AlvaroMontoro Gracias, lo tomaré en cuanto la próxima vez. Gracias.
    – Hoose
    Commented el 10 ago. 2016 a las 7:47

5 respuestas 5

2

Los elementos se están mostrando de esta manera (ver página completa):

    .propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>



                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

              </div>

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

El problema es que estás colocando todos los elementos en una misma fila, esto hace que Bootstrap los acomode como le sea conveniente. Para que se mantengan en su columna puedes crear una fila para cada grupo, ejemplo:

.propertyItem {
         box-shadow: 1px 1px 5px black;
         margin-bottom: 50px;
         border-radius: 5px;
    }

    .propertyItem h4 {
         font-weight: bolder;
         text-align: center;
         padding: 5px 10px;
         margin-bottom: 0;
         font-size: 1em;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

      <section class="container-fluid">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>Columna 1 con texto extenso que abarca múltiples líneas</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 3</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 4</h4>
                  </div>
                </div>
                
              </div>

              <div class="row">

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 1</h4>
                  </div>
                </div>

                <div class="col-md-3">
                  <div class="propertyItem">
                    <h4>columna 2</h4>
                  </div>
                </div>

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

2
  • ¡Hola! Creo que tienes razón. Sin embargo, no se como llevarlo acabo ya que estoy haciendo un bucle while en PHP. ¿Tienes alguna idea?
    – Hoose
    Commented el 10 ago. 2016 a las 16:29
  • Puedes añadir un contador en el bucle, agregas <div class="row"> cuando es 0 y cuando llegue a 3 agregas </div> y lo regresas a 0.
    – Diego
    Commented el 10 ago. 2016 a las 16:51
2

¿Has probado a encapsular grupos de 4 propiedades dentro de un .row?

Es decir...

<div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>

<div class="row">
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
    <div class="propiedad">...</div>
</div>
3
  • con eso no se soluciona, me ha pasado a mi varias veces @sergio
    – user9099
    Commented el 10 ago. 2016 a las 9:18
  • ¡Hola! Creo que tienes razón. Sin embargo, no se como llevarlo acabo ya que estoy haciendo un bucle while en PHP. ¿Tienes alguna idea?
    – Hoose
    Commented el 10 ago. 2016 a las 16:29
  • Yo haría algo más o menos así: $counter = 0; foreach($item in $collection){ if($counter == 0){ echo "<div class='row'>"; } echo '<div class="propiedad">'; echo "....."; echo "</div>"; if($counter == 0){ echo "</div>"; } if($counter == 3){ $counter = 0; } $counter ++; } (Disulpa la manera de mostrarte el código pero no se utilizar bien markdown)
    – user12424
    Commented el 11 ago. 2016 a las 9:28
2

Es muy importante para usar Bootstrap tener claro como funciona el grid.

En el grid de Bootstrap la unidad de medida son "Columnas" siendo un total de 12 lo que forma una fila, te pongo unos ejemplos:

Ejemplo 1:

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

Ejemplo 2:

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8"></div>
    <div class="col-md-2"></div>
</div>

Ejemplo 3:

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
</div>

Como ves todas las filas están formadas por 12 columnas. Si no cumples esto las columnas se te desacomodarán porque tienen hueco para hacerlo, y porque no están bien declaradas dentro de una fila (row)

Échale un ojo a la documentación oficial para el sistema grid de Bootstrap http://getbootstrap.com/css/#grid-example-basic

1

Prueba una propiedad que se llama text-overflow: ellipsis; junto con overflow: hidden;.

<div>
  <h3>Sin <code>text-overflow: ellipsis</code></h3>
    <p style="max-width: 250px; white-space: nowrap; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

<hr>

<div>
  <h3>Con <code>text-overflow: ellipsis</code></h3>
    <p  style="max-width: 250px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

1

Porque no pruebas usar la libreria masonry, lo que hace es agrupar todas las cajas sin que haya saltos de una a otra por la altura

Te dejo un ejemplo y el enlace a la libreria: http://masonry.desandro.com/

<div class="row">
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  <div class="col-lg-4">...</div>
  ...
</div>
<script src="/path/to/masonry.pkgd.min.js"></script>
$('.row').masonry({
  // options
  itemSelector: '.col-lg-4'
});

Sino tmbién lo que puedes hacer es añadir un min-height a las cajas

Espero que te sirva

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.