Jade/Bootstrap + Nodejs：網格渲染錯誤列

使用Jade/Bootstrap並嘗試將網格系統應用於nodejs/express設置中。我想要的頁面有一個頂部欄，它下面有一個頁眉，然後是下面的兩欄。我閱讀了html示例，然後將這些想法翻譯成玉石。下面的Jade代碼垂直堆棧頁面標題，頁面內容和輔助頁面內容（請參閱index.jade）。預計後兩者將是並排的。到目前爲止：所有的css和腳本文件都被正確加載，正如使用'nodemon'所看到的，我已經驗證了Jade中的縮進，我已經閱讀了各種Bootstrap文檔，並在Stack中查找了類似的問題。渲染實際上看起來像它被格式化爲一個小屏幕。我究竟做錯了什麼？Jade/Bootstrap + Nodejs：網格渲染錯誤列

layout.jade

doctype 5 
html 
    head 
    title= title 
    link(rel='stylesheet', type='text/css', href='lib/bootstrap/css/bootstrap.css') 
    link(rel='stylesheet', type='text/css', href='stylesheets/custom.css') 
    link(rel='stylesheet', type='text/css', href='stylesheets/style.css') 

    script(type='text/javascript', src='lib/jquery/jquery-1.10.2.min.js') 
    script(type='text/javascript', src='lib/bootstrap/js/bootstrap.min.js') 
    body 

    block content

index.jade

extends layout 
block content 
    div.topbar 
     div.fill 
      div.container 
       a.brand(href='#') #{title} 
       ul.nav 
        li.active 
         a(href='#') Home 
        li 
         a(href='#about') About 
        li 
         a(href='#contact') Contact 
       form.pull-right(method="post", id="loginForm") 
        input.input-small(id="username", type="text", name="User", placeholder="Username") 
        input.input-small(id="password", type="password", name="Password", placeholder="Password") 
        input.btn.primary(type="submit", value="Sign In") 
       p#loginPrompt.pull-right.login-prompt 
    div.container 
     div.content 
      div.page-header 
       h1 Main Page 
       small Welcome to #{title} 
      div.row 
       div.span4 
        h2 Page Content 
       div.span4 
        h3 Secondary Content 
     div.footer 
      p &copy; test 2013

來源

2013-10-15 kim bellinger

您正在使用什麼版本的引導呢？在3中，你的類應該像'col-'，就像'col-md-4'一樣，而不是'span4'。 [所以在版本差異發佈]（http://stackoverflow.com/questions/17952571/how-has-twitter-bootstrap-3-changed-over-version-2-3-2）。如果這是你的問題，讓我知道，我會發布答案。 – MikeSmithDev

哦，大聲哭...這就是它！ –

引導3做了一些變化，更名爲一些關鍵的類別，包括span類，所以你需要使用col-相反，如col-md-4：

div.row 
    div.col-md-4 
     h2 Page Content 
    div.col-md-4 
     h3 Secondary Content

，甚至這樣的事情，如果你希望它是一個列手機，以及兩個爲他人：

div.row 
    div.col-xs-12.col-sm-4 
     h2 Page Content 
    div.col-xs-12.col-sm-4 
     h3 Secondary Content

SO post on version differences。

來源

2013-10-15 17:41:59 MikeSmithDev

最佳鏈接是：http://getbootstrap.com/getting-started/#migration令人沮喪的情況尤其如此。因爲我正在關注最近的教程[鏈接]（http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/），它的鏈接都指向了v2文檔。 –

@ kimbellinger良好的鏈接。是的，我對使用舊版Express的節點教程也有同樣的問題：/讓我覺得很有意思。 – MikeSmithDev

你可以試試這個：

row 
col-md-4 
    h2 Page Content 
col-md-4 
    h3 Secondary Content

來源

2017-01-14 17:56:40

雖然此代碼可能回答此問題，但提供有關如何解決問題和/或解決問題原因的其他上下文會提高答案的長期價值。 –

Jade/Bootstrap + Nodejs：網格渲染錯誤列

回答

相關問題