Obraz i tekst Bootstrapu obok siebie w podzbiorze

Question

Próbuję umieścić obraz i teksty obok siebie w bootstrapie wewnątrz pojedynczego elementu div. Do tego użyłem class z thumbnail. Ale użycie miniatury początkowej powoduje, że obraz jest u góry, a wszystkie teksty na dole.

Tak więc zmieniłem nieco, aby umieścić obraz i teksty tylko w miniaturze i podzielić miniaturę na dwie części. Ale na zmianę rozmiaru ekranu na mały problem powstaje .. Teksty przenoszą nad obrazem ..

Oto kod, co starałem dotąd

<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

Spróbuj

<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> 

kod css napisać to na zapytania mediów, jeśli u potrzeba tylko dla mobilnego

.image-container{text-align:center} 

w przypadku, gdy u potrzeba zarówno zdjęcie i tekst obok siebie w urządzeniu mobilnym, usunąć wysokość dla obrazu w zapytaniu mediów na komórkę rozdzielczość urządzeń, nadaj szerokość 100% do obrazu

Answer 2

Musisz upewnić się, że używasz elementów div z klasą row wokół kolumn, również jeśli masz mieć col-xs-6, to ustawia te kolumny rozmiar (6) również w większych rozmiarach (nie ma potrzeby używania col-sm-6 itp.).

Spróbuj ten kod:

<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>