Sv Community El Salvador
Soporte y Tecnología => Diseño & Webmaster Corner => Mensaje iniciado por: tekun en abril 27, 2018, 05:07:11 pm
-
hey marachitos, tengo un clavo que ni idea de como solucionar... les dejo esta imagen:
(https://i.imgur.com/wNrWrGd.jpg)
la imagen creo que habla por si sola
este es el codigo que tengo
<div class="col-lg-3"> <!-- small box -->
<div class="small-box bg-aqua">
<div class="inner">
<h3>1</h3>
<p>MINICOMPONENTE PANASONIC BLUETOOTH</p>
</div>
<div class="icon">
<i class="ion ion-bag"></i>
</div>
<a href="#" class="small-box-footer">Agregar más <i class="fa fa-arrow-circle-right"></i></a>
</div>
</div> <!-- ./ small box -->
como hago para que ese <p> donde esta el nombre haga el salto de línea pero no haga que crezca el div.inner
-
no se ve la foto :/
-
no veo la foto pero me imagino que queres que el contenido del div.icon quede abajo del <p> sin meter un <br> evitando que crezca el div.inner, y creo que con flexbox se puede y hace que el flex-direction sea column
-
(http://i.imgur.com/wNrWrGd.jpg)
Para corregir eso, al wrapper del div "col-lg-3" (no se como se llama) le ponés esto:
.wrapper-de-col-lg-3 {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
Y al "col-lg-3" le ponés esto:
.col-lg-3 {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
Todos van a tener el mismo alto y eliminas ese espacio vacío.
-
les dejo la imagen adjunta, no se porque unos la ven y otros no x_x
no se pueden subir adjuntos. x_x
link directo entonces
http://i.imgur.com/wNrWrGd.jpg
(https://preview.ibb.co/nFrVMx/Screenshot_1.jpg) (https://ibb.co/b3Zjgx)
y pues no estoy ocupando flexbox, estoy con bootstrap 3
-
arreglado, con agregar un height al inner , estaba sencillo,...gracias a todos!