twitter-bootstrap - Bootstrap：显示跨度之间的空间

Question

我一直在为我的项目使用引导程序来实现响应式流体布局，我对这个界面很满意。

我有 12 个跨度用于连续设计块。这是一行的引导程序：

<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

使用媒体查询，您可以根据屏幕大小添加样式，所以我不知道您的布局更改的宽度，但对于这个示例，我将使用 700 像素，一旦屏幕的宽度达到 700 像素，类 span8获得风格margin-top: (your desired margin)px;这就是我在引导程序中进行造型的方式。一旦您的响应能力开始，这应该允许您在 span8 上方拥有额外的空间。

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