Twitter引導響應式佈局

Question

我做出了這種響應式佈局。它工作正常，直到屏幕的寬度小於800px，它會變得混亂。

我該如何解決這個問題，使徽標只是「收縮」，不要將自己重新排列在彼此之下？

http://jsfiddle.net/hashie5/Pnc3g/

HTML：

<div class="container"> 
<div class="testimonials row-fluid"> 
    <div class="span6"> 
     <div class="row-fluid"> 
      <div class="span12"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
      <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
     </div> 
     <div class="row-fluid"> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
     </div> 
     <div class="row-fluid"> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
      <div class="span3"> <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a></div> 
     </div> 
    </div> 
    <div class="span6"> 
     <div class="quote"> 
      <div class="text"> 
       <em>Congratulations! It is really a great tool, it is very friendly for us. Creating a new message is so easy with your smart builder. Thank you for that. 10/10</em> 
      </div> 
      <div class="author">JUAN ISAAC RODRIGUEZ, Credit Report, Peru.</div> 
     </div> 
    </div> 
</div> 

CSS：

.testimonials { 
    background-color:#f7f7f7; 
} 
.quote { 
    background: url("http://www.flexmail.net/images/quote_home.gif") left top no-repeat; 
    height: 128px; 
    margin: 20px auto 0 auto; 
    padding: 20px; 
} 
.quote .text { 
    color: #444444; 
    line-height: 22px; 
} 
.quote .author { 
    color: #666666; 
    float: left; 
    font-family:'colaboratelightregular'; 
    font-size: 12px; 
    line-height: 22px; 
    margin: 10px 0 0; 
} 

Answer 1

每spanX將成爲具有100％在較窄的窗口寬度中的行。這是什麼導致你的混亂:)

也許這是一種替代解決方案，但不是最好的，因爲我們有複製的HTML代碼中的圖像。

我已經添加了一些CSS

.visible-phone img { 
    float: left; 
    width: 25%; 
} 

有些HTML

<div class="row-fluid visible-phone"> 
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
    <a href="#"><img src="http://www.flexmail.net/images/logos/logo_flexmail.png" alt="gas" /></a> 
</div> 

所有的圖像出現在HTML兩次。請注意0​​和hidden-phone上的div包裝圖像。

http://jsfiddle.net/Pnc3g/5/