Bootstrap：显示跨距之间的空间

Question

我一直在为我的项目使用bootstrap进行响应式流体布局，我很满意这个界面。

我使用12个跨度来连续设计块。 这是一行的bootstrap：

<div class="row-fluid">
    <div class="span4">
        <img src="block.png">
    </div>
    <div class="span8">
        <p><!---some text---></p>
    </div>
</div>

它将在行中显示这些跨度并且在全宽屏幕上看起来很好。

问题

我在全屏视图中没有任何问题但是当我缩小到屏幕时，其中一个块进入下一行并且这两个块之间没有空格。

就像这样 -

全屏布局

缩小屏幕

如何获得空间黑白字线？

Answer 1

在徽标中添加徽标类

<img src="URL" alt="ALT" class="logo"/>

然后使用Sieu Phan的回答margin-bottom：

@media (max-width: 700px) {
    .logo
    {
        margin-bottom: 10px;
    }
}

Answer 2

使用媒体查询，您可以根据屏幕大小添加样式，因此我不知道您的布局更改的宽度，但是对于此示例，我将使用700px，一旦屏幕宽度达到700px，类span8获取样式margin-top: (your desired margin)px;这就是我在bootstrap中创建样式的方式。一旦你的响应能够开始，这应该允许你在span8之上留出额外的空间。

@media (max-width: 700px) {
    .span8
    {
        margin-top: (x)px;
    }
}