Twitter引導通過可用空間劃分行流體

我有以下用例。
我需要繪製6個html div塊並將其分解爲可用空間。
圖像波紋管將演示它是如何假設的。你能看看這段代碼，告訴我我的跨度有什麼問題嗎？ http://jsfiddle.net/DWZLE/ 感謝
enter image description here Twitter引導通過可用空間劃分行流體

這裏是代碼的啓動方式：

<div class="container" style="width: 68%;"> 
    <div class="row-fluid"> 

     <div class="span4"> 
      <div> 
       <img src="http://trialx.com/curetalk/wp-content/blogs.dir/7/files/2011/05/diseases/Globus-3-small.gif" /> 
      </div> 
      <h3><a href="http://www.google.com">We speak your language</a></h3> 
      <p> 
       text text text text text text text text text text text text text text text text text text text text 
       text text text text text text text text text text text text text text text text text text text text text 
      </p> 
     </div>...

更新我把它分成兩行，現在，它打破了，但是從3連續兩次1在一排。
而且，它不居中。看到這裏http://jsfiddle.net/DWZLE/

來源

2013-05-05 yos mishan

您應該添加引導-responsive.css到小提琴或使用http://bootply.com代替 – ZimSystem 2013-05-05 17:34:19

你不能這樣做。

在boostrap中，每行中的第一個元素沒有margin-left，所以它可以適合其他元素，所以當你添加6 span4時，4元素（它是第二行中的第一個元素）將有餘裕，並會推動orher元素。

所以你應該在每一個3行中做2行。

來源

2013-05-05 17:02:31 drip

謝謝，請參閱我的更新 – 2013-05-05 18:15:28

我dind't看到更新後的版本什麼變化，看這裏： http://jsfiddle.net/DWZLE/1/這就是我的想法。 – drip 2013-05-05 18:20:02

我改變了鏈接。無論如何，在你的代碼中，它從3到打破，而不是從3到2，而不是一個（像我的圖片）。它不居中。謝謝 – 2013-05-05 18:24:38

我同意滴灌。罰款解釋。

你可以做到。

One Row. (Max span count 12) 
<div class="row-fluid"> 
    <div class="span4"> 
     ... 
    </div 
    <div class="span4"> 
     ... 
    </div 
    <div class="span4"> 
     ... 
    </div 
</div> 

Two Row 
<div class="row-fluid"> 
    ... 
</div>

來源

2013-05-05 17:24:46

謝謝，請看我的更新 – 2013-05-05 18:15:49

Twitter引導通過可用空間劃分行流體

回答

相關問題