引導程序3列，圖像和文本響應

Question

下面的代碼顯示3列，每列都有一個圖像和文本，可在較小屏幕上調整大小，最後在智能手機上調整爲1列。有兩個問題：1 /在最小的屏幕上，圖像太大，2 /文本在圖像下面（像在大屏幕上），但我希望它在圖像的側面（最小屏幕的一半）。

我看了很多例子，但我不能找到一些簡單的...

如何我引導實現這一目標容易嗎？

<div class="container BSC_Angel"> 
    <div class="row"> 
    <div class="col-md-12 text-center"> 
     <div class="col-sm-4 text-center" style=""> 
     <div>image 1</div> 
     <div>text 1</div> 
     </div> 
     <div class="col-sm-4 text-center" style=""> 
     <div>image 2</div> 
     <div>text 2</div> 
     </div> 
     <div class="col-sm-4 text-center" style=""> 
     <div>image 3</div> 
     <div>text 3</div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

您可以使用CSS Flexbox的。

看一看這個Codepen。

;或者看看下面的代碼片段（use full screen to view this properly）：

.content-holder { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin: 20px 0; 
 
} 
 

 
/* On Mobiles (screen width <= 767px) */ 
 
@media screen and (max-width: 767px) { 
 
    .content-holder { 
 
    flex-direction: row; 
 
    } 
 
    
 
    .text-div { 
 
    margin-left: 10px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container BSC_Angel"> 
 
    <div class="row"> 
 
    <div class="col-md-12 text-center"> 
 

 
     <div class="col-sm-4 text-center" style=""> 
 
     <div class="content-holder"> 
 
      <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div> 
 
      <div class="text-div">Text 1</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-sm-4 text-center" style=""> 
 
     <div class="content-holder"> 
 
      <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div> 
 
      <div class="text-div">Text 2</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-sm-4 text-center" style=""> 
 
     <div class="content-holder"> 
 
      <div class="img-div"><img src="http://placehold.it/100x100" alt=""></div> 
 
      <div class="text-div">Text 3</div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

希望這有助於！