手机上的Bootstrap网格系统？

Question

看到下面的JSFIDDLE

<div class="row"> 

    <div class="col-md-3 col-xs-6"> 
    <div style="background: blue;"> 
     test &amp; test &amp; 
    </div> 
    </div> 

    <div class="col-md-3 col-xs-6"> 
    <div style="background: yellow;"> 
     test &amp; test &amp; 
    </div> 
    </div> 

    <div class="col-md-3 col-xs-6"> 
    <div style="background: red;"> 
     test &amp; test &amp; 
    </div> 
    </div> 

    <div class="col-md-3 col-xs-6"> 
    <div style="background: green;"> 
     test &amp; test &amp; 
    </div> 
    </div> 

</div> 

当你缩小浏览器，是不是应该当你缩小窗口添加保证金（顶部&底部）？

我缺少的东西，或这是否有在媒体查询添加？

Answer 1

列默认情况下不会在引导网格系统有余量。然而行做，但为了一定的余量增加了底部，你将不得不加入一些简单的CSS做：

.row > .col-md-3 { 
    margin-bottom: 10px; 
} 

或者，如果你不希望这是一个共同的规则，只是增加了一些自定义类或id来指定这一点。

您可以通过使用浏览器的检查器工具轻松查看正在列上使用的CSS规则。列没有边距，但有填充（左侧和右侧，而不是垂直）。如果您觉得这种方式更好，您可以将上面的常用CSS规则插入媒体查询，具体取决于您的项目。

应用它在媒体查询：

@media (max-width: 991px) 
{ 
    .row > .col-md-3 { 
     margin-bottom: 10px; 
    } 
} 

而且，任何套房，为您最好的。