Twitter Bootstrap行div不起作用

我想在我的網站上使用Twitter Bootstrap製作兩列，將行div分爲以下代碼。Twitter Bootstrap行div不起作用

問題是語法在我的計算機上看起來不像在文檔站點上一樣。例如，如果我複製了example page的源文件，它將顯示完全不同，池和活動菜單項不正確顯示，並且將colums作爲段落放在彼此之下。

我也找不到webkit檢查器的任何線索，代碼和文件結構和編碼與教程示例站點相同。

任何想法的人？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Title comes here</title> 
     <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="row"> 
       <div class="span4"> 
       <p>Dummy Text</p> 
       </div> 

       <div class="span8"> 
       <p>Dummy Text</p> 
        </div> 
            </div> 
     </div> 
    </body> 
</html>

來源

2014-01-19 user3213271

您使用的是哪個版本的引導程序？ –

由於屏幕尺寸較小，您是否確定它不僅僅是因爲它的級聯而被級聯？ – MackieeE

你是代碼[在這個例子中看起來很好]（http://jsbin.com/afeSUGeC/1/edit）。您可能使用Bootstrap 2從文檔站點複製代碼，但實際上已經自己下載了Bootstrap 3。 – davidpauljunior

你需要一個不同的類添加到您的列：

<div class="col-md-6"> 
    <p>Dummy text</p> 
</div>

選擇md部分取決於器件尺寸代碼支持（md爲中等，也lg使用大型臺式機，sm平板電腦xs和智能手機）

這適用於自引導版本v3.0.3

來源

2014-01-19 23:09:10

看起來他正在使用Bootstrap版本2.3.2，所以這沒有幫助。 – luke2012

看起來你正在使用引導（3.X）的新版本。在你的例子中使用的是2.3.2。網格系統完全重建，以更好地支持響應。

http://getbootstrap.com/css/#grid-example-basic

相反SPANX的，你應該使用COL-XS-X，COL-SM-X或COL-MD-X或COL-LG-X 與X的列數。 xs，sm，md和lg取決於您想要支持的屏幕大小。

來源

2014-01-19 23:15:28

Twitter Bootstrap行div不起作用

回答

相關問題