un <p> sin ampliar un div en un salto de linea

[tekun]

hey marachitos, tengo un clavo que ni idea de como solucionar... les dejo esta imagen:



la imagen creo que habla por si sola

este es el codigo que tengo

Código: [Seleccionar]

<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

[g00mba]

no se ve la foto :/

[madara]

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

[raiderek]

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.

[tekun]

les dejo la imagen adjunta, no se porque unos la ven y otros no 

no se pueden subir adjuntos. 

link directo entonces
http://i.imgur.com/wNrWrGd.jpg




y pues no estoy ocupando flexbox, estoy con bootstrap 3

[tekun]

arreglado, con agregar un height al inner , estaba sencillo,...gracias a todos!