如何在引導程序中爲移動設備的垂直堆棧列之間添加空間

Question

我有四個圖像在引導程序中在桌面上水平運行。在移動設備上，我希望這些圖像能夠垂直堆疊（它們是這樣做的）。唯一的問題是，當它們在移動設備上垂直堆疊時，圖像之間沒有垂直間距。是否有可以添加的引導程序樣式，以便在移動設備上垂直堆疊？

這裏是我的bootply： http://www.bootply.com/ccP5Q7o6a0

這裏是我的代碼：

<div class="container"> 
    <div class="row"> 
     <h2 class="section-heading">How it Works</h2> 

     <div class="col-md-3 col-sm-6"> 
      <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png"> 
      <p class="text-center">You need an apple</p> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png"> 
      <p class="text-center">You need an orange</p> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png"> 
      <p class="text-center">You need a pineapple</p> 
     </div> 
     <div class="col-md-3 col-sm-6"> 
      <img class="img-responsive" src="http://pngimg.com/upload/apple_PNG40.png"> 
      <p class="text-center">You need a melon</p> 
     </div> 
    </div> 

</div> 

Answer 1

使用自己的媒體查詢到相關執行任務，如果需要的話。

添加一類到行：

<div class="row myclass"> 

然後添加一個媒體查詢在所需的寬度來處理它

@media (max-width: 600px) { 
    .myclass > div { 
     margin-bottom: 10px; 
    } 
    } 

喜歡的東西上面。

Answer 2

用bootstrap visible-xs類，僅顯示最小的屏幕上..

<div class="col-xs-12 visible-xs"><br></div> 

演示：http://bootply.com/UfC6tohHa7