2013-06-24 79 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; 
    } 
}