Bootstrap immagine e testo affiancati in un div

Question

Sto cercando di mettere un'immagine e dei testi affiancati in bootstrap all'interno di un singolo div .. Per questo ho usato il class di thumbnail. Ma usando la miniatura di bootstrap fa in modo che l'immagine vada in alto e tutti i testi in basso.

Quindi l'ho modificato un po 'per mettere l'immagine e il testo solo nella miniatura e dividendo la miniatura in due parti. Ma il ridimensionamento dello schermo in piccoli il problema sta sorgendo .. I testi si stanno spostando sull'immagine ..

Ecco il codice di quello che ho provato fino ad ora

<div class="row"> 
<div class="col-sm-6 col-md-6 col-xs-6"> 

       <div class="thumbnail" style="border:none; background:white; height:210px;"> 

       <div class="col-sm-6 col-md-6 col-xs-6"> 
       <img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" /> 
       </div> 

       <div class="col-sm-6 col-md-6 col-xs-6"> 

       <h3>Hello World</h3> 
       <p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p> 
       </div> 
       </div> 

</div> 
</div> 

Screenshot without resizing

Screenshot after resizing

Answer 1

Prova questa

<div class="col-sm-6 col-md-6 col-xs-6"> 

       <div class="thumbnail" style="border:none; background:white;"> 

       <div class="col-sm-6 col-md-6 col-xs-12 image-container"> 
       <img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" /> 
       </div> 

       <div class="col-sm-6 col-md-6 col-xs-12"> 

       <h3>Hello World</h3> 
       <p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa. </p> 
       </div> 
       </div> 

</div> 

codice css scrivere questo media query se u bisogno solo per mobili

.image-container{text-align:center} 

nel caso se il bisogno di u sia il lato immagine e testo a fianco in dispositivi mobili, rimuovere l'altezza dell'immagine in media query al mobile risoluzione dei dispositivi, dà larghezza al 100% all'immagine

Answer 2

È necessario assicurarsi che si stiano utilizzando le div con la classe row intorno alle colonne, anche se si avrà col-xs-6 imposta queste colonne taglia (6) anche sulle taglie più grandi (non è necessario usare anche col-sm-6 ecc).

provare questo codice:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
\t \t 
 
\t <div class="row" style="border:none; background:white; height:210px;"> 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <img src="images/online_learning.jpg" style="height:200px; margin-left:-15px;" /> 
 
\t \t </div> 
 
\t \t <div class="col-xs-6"> 
 
\t \t \t <h3>Hello World</h3> 
 
\t \t \t <p style="font-size:10px; color:#03225C;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit adipiscing blandit. Aliquam placerat, velit a fermentum fermentum, mi felis vehicula justo, a dapibus quam augue non massa.</p> 
 
\t \t </div> 
 
\t </div>