0

quiero generar algo parecido a lo que muestro en la siguiente linea: contenedores

estaba intentando con el sistema de rejilla pero no creo que sea el mas adecuado, luego intenté generando varios div con la propiedad flex-row para que queden uno al lado del otro pero tengo algunos inconvenientes. 1) intento aplicarles propiedades como border para que se destaquen y un color pero no tienen efecto y 2) quiero que todos los div tengan el mismo tamaño y que al escribir un texto dentro de ellos se mantenga su tamaño y el texto dentro del div. ¿Cuál sería la forma correcta de hacer esto? Gracias de antemano al que me pueda ayudar.

3
  • ya intento con el sistema de grillas de boopstrap ?
    – srJJ
    Commented el 27 sept. 2018 a las 2:21
  • Con el sistema de rejillas? Si, pero no logré obtener un resultado como el de la imagen amigo.
    – JulianProg
    Commented el 27 sept. 2018 a las 2:25
  • podrias intentarlo sin bootstrap, usando display: flex y para los contenedores les declaras el mismo tamaño a todos con % en css Commented el 27 sept. 2018 a las 14:53

1 respuesta 1

0

Mira, intenta con esto, creo que es lo que bsucas.

Este estilo css agregalo a los divs que quieres

.borde2{
    /*height: 30px;*/
    overflow:auto;
    max-height: 50px;
    word-wrap:break-word;
    -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
    margin-bottom: 2%;
    border: 1px solid #dad8d8;
    padding-top: 10px;
    padding-bottom: 15px;
  }



<div class="content-header">
  <div class="container row">
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 1 FILA</label>
    </div> 
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">2 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">3 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">4 CONTENEDOR DE 1 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 1 FILA</label>
    </div> 
  </div>
  <div class="container row">
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 2 FILA</label>
    </div> 
    <div class="col-lg-3 input-group">
      <label for="nombre9" class="col-form-label col-lg-12">2 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">3 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">4 CONTENEDOR DE 2 FILA</label>
    </div>
    <div class="col-lg-3 input-group borde2">
      <label for="nombre9" class="col-form-label col-lg-12">1 CONTENEDOR DE 2 FILA</label>
    </div> 
  </div>
</div>

Actualizacion: Navegando en la web recopile este css en el cual solo le cambias el heigth y listo nunca se sale ni para los lados, por que le pone el guion necesario, (debes tener definido el tipo de leng en el html si quieres que te ponga el guin "-" al final de las palabras que no alcanzan a quedar completas) y ademas queda como con scroll para que si sobre pasa el tamaño que le definiste verticamente

espero te sea util, me cuentas como te fue

6
  • Algo así, pero cuando intento escribir un párrafo dentro de cada columna el texto sale fuera de ella y se pasa hacia la otra, como haría para que eso no pase? quiero que todos los contenedores tengan el mismo tamaño y que todo lo que agregue dentro de ellos se mantenga, no salga del limite del tamaño del contenedor.
    – JulianProg
    Commented el 27 sept. 2018 a las 2:37
  • lo que puedes hacer es dentro del div, en donde estan los label puedes poner un input o un texarea
    – srJJ
    Commented el 27 sept. 2018 a las 2:38
  • pero no quiero poder escribir, es decir, lo que quiero es colocar tener varios div con informacion dentro que yo coloque, sea una imagen o una información, si coloco un textarea no me sirve amigo.
    – JulianProg
    Commented el 27 sept. 2018 a las 2:44
  • el text area le puedes definir un tamaño exacto ademas puedes usas css para que los div tengan un withd y un heigth definidos y asi no se salen
    – srJJ
    Commented el 27 sept. 2018 a las 2:46
  • prueba a usar la propiedad 'text-overflow' de css
    – D Ie
    Commented el 27 sept. 2018 a las 5:38

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.