Bootstrap3中嵌套行之間缺乏間距問題

Question

此處爲新學習者。我遇到了我的.col-md-10 div內嵌的兩行間沒有空格的問題。現在我的代碼如下所示：

<div class="col-md-10 col-md-offset-1"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <div class="page-header"> 
      <h3>Portfolio</h3> 
     </div> <!--.page-header--> 

     <div class="row center-block"> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
     </div> <!--.row--> 

     <div class="row center-block"> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
     </div> <!--.row--> 

     </div> <!--.panel-body--> 
    </div><!--.panel panel-default--> 
    </div><!--.col-md-10--> 

</row><!--.row--> 

Here是什麼樣子的屏幕上。

基於Bootstrap網站上的「偏移列」示例，我最初將圖像分爲兩個.row中心塊div（而不是所有.col-md-4 div在一個.row div中），但它沒有改變屏幕上呈現的內容。

如果這有幫助，here是我的項目的所有代碼。提前致謝！

Answer 1

大廈關閉LVarayut的答案，最後我以調整行之間的間距增加了margin-top所有.col-md-4的div。此外，我將兩個.row center-block div合併爲一個div，並添加了一個.col-xs-6類，該類現在將在移動設備和平板電腦尺寸上爲每行生成2個圖像。這是我的新代碼：

<div class="col-md-10 col-md-offset-1"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <div class="page-header"> 
      <h3>Portfolio</h3> 
     </div> <!--.page-header--> 

     <div class="row center-block"> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
      <div class="col-md-4 col-xs-6"> 
      <img src="http://placekitten.com/200/250" class="img-responsive" alt="Kitten1"/> 
      </div><!--.col-md-4--> 
     </div> <!--.row--> 

     </div> <!--.panel-body--> 
    </div><!--.panel panel-default--> 
    </div><!--.col-md-10--> 

這裏是我添加了一個margin-top實現間距：

.col-md-4, .col-xs-6 { 
    margin-top: 20px; 
} 

Answer 2

在Twitter Bootstrap中，行之間通常沒有空格。所以，你需要自己添加一個margin。您可以創建一個班級並將其添加到第二行。例如：

.row-space{ 
    margin-top:10px; 
} 

然後，

<div class="row center-block row-space"> 
    //The content goes here 
</div>