爲小屏幕創建div之間的空間

Question

我一直在努力在小屏幕的div之間創造空間。我嘗試使用padding-top，但它不適合我。

這是我的html頁面

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3 col-xs-12"> 
      <div class="col-md-6 col-xs-12"> 
       <a href="" class="box"> 
        <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/> 
       </a> 
      </div> 
      <div class="col-md-6 col-xs-12"> 
       <a href="" class="box"> 
        <img src="" class="img-card-content center-block img-responsive" style="width: 200px"/> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

對我的CSS：

.box { 
    padding: 40px; 
    display: block; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -o-border-radius: 10px; 
    -ms-border-radius: 10px; 
    border: 1px solid #575757; 
} 

CSS的其餘部分是從引導。

沒有人有解決方案嗎？

Answer 1

只需添加下面的CSS此

@media only screen and (max-width:768px) { 
    .box { 
     margin-bottom: 10px; /* Or required space */ 
     display: block; 
    } 
} 

Answer 2

希望這將有助於..以下是工作片段：

.box { 
 
    padding: 40px; 
 
    display: block; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    -o-border-radius: 10px; 
 
    -ms-border-radius: 10px; 
 
    border: 1px solid #575757; 
 
} 
 

 
@media (max-width:768px){ 
 
.box { margin-bottom:15px; display:block;} 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-md-offset-3 col-xs-12"> 
 
      <div class="col-md-6 col-xs-12"> 
 
       <a href="" class="box"> 
 
        <img src="https://dummyimage.com/600x400/000/fff" class="img-card-content center-block img-responsive" style="width: 200px"/> 
 
       </a> 
 
      </div> 
 
      <div class="col-md-6 col-xs-12"> 
 
       <a href="" class="box"> 
 
        <img src="https://dummyimage.com/600x400/000/fff" class="img-card-content center-block img-responsive" style="width: 200px"/> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

@superuser是正確的但他拼寫錯了

@media (max-width:768px) { 
    .box { 
     margin-bottom: 10px; /* Or required space */ 
     display: block; 
    } 
}