引導：移動顯示器上的列之間的差距

我正在做一個網站使用引導3.0，我希望HTML和CSS可以整潔地在桌面，平板電腦和手機上看到。引導：移動顯示器上的列之間的差距

我遇到的一個問題是，當您在移動顯示器上查看網站時，該列會堆疊（我不會批評，因爲這會停止滾動儘可能多）。但是，我想要列之間的差距（甚至1-2px）。

到目前爲止

<div class="row"> 
    <div class="col-xs-12 col-sm-8 col-md-8"> 
     <div class="Columns"> 
     ..content 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-8 col-md-4"> 
     <div class="Columns"> 
     ..content 
     </div> 
    </div> 
</div>

的圖像顯示這是什麼做的，並顯示堆棧列

enter image description here

我怎麼能實現列之間差距不大的代碼？

感謝

來源

2015-05-24 user3428422

添加自定義類.column-margin設置行/列之間的空白。

@media (max-width: 991px) { 
    .column-margin { 
    margin: 2px 0; 
    } 
}

<div class="row"> 
    <div class="col-xs-12 col-sm-8 col-md-8"> 
    <div class="Columns column-margin"> 
     <img src="http://placehold.it/300x300" /> 
    </div> 
    </div> 
    <div class="col-xs-12 col-sm-8 col-md-4"> 
    <div class="Columns"> 
     <img src="http://placehold.it/300x300" /> 
    </div> 
    </div> 
</div>

Codeply

來源

2015-05-24 13:26:31

由於第一次被選爲正確答案。謝謝！ – user3428422

給了col-xs-12保證金，以便所有塊將在移動設備的底部邊緣。

@media (max-width: 767px) { 
    .col-xs-12 { 
    margin-bottom: 10px; 
    } 
}

來源

2015-05-24 13:41:17

報復間距和列大小我會做到以下幾點：（注：改變COL-MD-*對col-SM-*或COL-XS-*，只要你喜歡）

<div class="container"> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
    <div class="col-md-3 "> 
     <div class="col-md-12 well"> 
      Some Second Content.. 
     </div> 
    </div> 
</div>

來源

2015-05-24 16:29:11

引導：移動顯示器上的列之間的差距

回答

相關問題