jsfiddle上的自舉網格

我正在試驗Bootstrap並使用jsfiddle.net創建一些快速和髒的測試。jsfiddle上的自舉網格

但是我在一個非常簡單的測試中遇到了一堵磚牆。我只是想看看在引導網格系統，所以我重複他們的第一個例子：

<div class="row"> 
    <div class="span4">Span 4</div> 
    <div class="span8">Span 8</div> 
</div>

但是，它似乎並不work--的「跨度4」和「8跨度」出現堆積而不是預期的兩列布局。

我錯過了一些明顯的東西嗎？這裏的小提琴：http://jsfiddle.net/8Xf2j/1/

感謝

2012-10-05 user101289

嘗試使結果框架（或整個窗口）變寬。 Bootstrap可能會堆積列，因爲窗口太小。 – grc

@grc - d'oh！就是這樣。非常簡單 - 我想到了那些無法堆疊的小文本字符串，但我認爲視口仍然小於所需的引導程序。謝謝！ – user101289

Bootstrap可能使用媒體查詢，所以如果視口小於設置的寬度，它將疊加列，而不管它們的寬度。 – grc

如果使用bootstrap-combined.min.css文件，則表示Responsive Layout處於活動狀態。此外，您必須使用.container設置最小寬度（如果不是，主體將適合窗口，這將導致無論如何 - 在小屏幕上）。

下面是使用網格的一種方法：Demo (jsfiddle)

<div class="container"> 
    <div class="row"> 
     <div class="span4">Span 4</div> 
     <div class="span8">Span 8</div> 
    </div> 
</div>

你應該注意到，只有bootstrap.min.css文件包含在資源。

2012-10-05 12:30:40 Sherbrow

看到有跨度的寬度已定義。它的總寬度是960px（span4（320px）+ span8（640px）= span12（960px））。所以jsfiddle正在顯示這樣的結果。嘗試製作一個html文件，並嘗試這個並設置邊框供您參考。

2012-10-05 07:11:12 Selvamani

回答