2013-06-24 40 views
1

我一直在使用引导程序进行响应流体布局的项目,我对此接口感到满意。引导程序:显示跨度之间的空间

有12个跨度我用于连续设计模块。 这是自举的一个行:

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

它会显示在这些行跨度和看起来充满宽屏幕不错。

问题

我没有在全屏视图任何问题,但是当我做窄筛选块的一个前进到下一行并没有这两个块之间的空间。

它偏偏喜欢这 -

全屏布局

enter image description here

窄屏幕 enter image description here

我如何获得空间的B/W跨度线?

+1

add bootstrap-responsive.css –

回答

0

使用媒体查询,您可以添加基于屏幕大小的样式,所以我不知道在什么宽度上布局更改,但对于此示例,我将使用700px,一旦屏幕宽度达到700px ,班级span8获得风格margin-top: (your desired margin)px;这就是我在bootstrap中完成自己的样式。这应该让你有以上span8额外的空间,一旦你的反应在踢

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

我已经给它一个尝试,但内联也发生这种情况。 – Manoj

+0

你可以用你的CSS做一个jsfiddle吗? – ZZPLKF

1

新增标志类徽标

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

然后使用Sieu藩的回答与margin-bottom

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