Twitter引導模式彈出窗體 - 如何降低顯示的形式

我最近下載了TB 2，並已開始熟悉它。我正在創建一個基於英雄示例的頁面。Twitter引導模式彈出窗體 - 如何降低顯示的形式

我在頁面上添加了一個彈出窗體，使用的代碼是我發現的here。這一切似乎工作到目前爲止 - 但是，我覺得顯示的彈出框太高了。我想稍微降低一點，這樣我就可以（至少）看到顯示窗體的頂部。

我用螢火蟲檢查了CSS。我注意到造型是從引導來，從這些線（按順序給出）：

element.style { 
    display: block; 
} 
.modal.fade.in { 
    top: 50%; 
} 
.modal.fade { 
    top: -25%; 
    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s; 
} 
.fade.in { 
    opacity: 1; 
} 
.hide { 
    display: none; 
} 
.modal { 
    background-clip: padding-box; 
    background-color: #FFFFFF; 
    border: 1px solid rgba(0, 0, 0, 0.3); 
    border-radius: 6px 6px 6px 6px; 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); 
    left: 50%; 
    margin: -250px 0 0 -280px; 
    outline: 0 none; 
    position: fixed; 
    top: 50%; 
    width: 560px; 
    z-index: 1050; 
} 
.fade { 
    opacity: 0; 
    transition: opacity 0.15s linear 0s; 
}

的「明顯」的事情將是一個選擇添加到顯示的形式元素，並添加一個新的CSS規則到我的外部樣式表，或者覆蓋/定製由TB提供的樣式。然而，由於我並不真正知道自己在做什麼（我還在學習結核病），我認爲最好在這裏問一下，以防止我終止打破迄今爲止的佈局。

什麼是推薦的方式來降低彈出窗體，以便我可以看到窗體的頂部，也許有一點在它後面的Navbar（理想情況下，但我希望彈出窗體是顯示在導航欄菜單下方 - 但這可能太複雜了）。

來源

2012-11-13 Homunculus Reticulli

不要害怕修補代碼。只需採取自己的規則，並在底部顯示它們。您可以隨時將其刪除。不要編輯引導CSS代碼本身。最低的代碼覆蓋以前的代碼。

並使用螢火蟲&它的風格&計算風格面板來測試。

來源

2012-11-13 17:50:52

Twitter引導模式彈出窗體 - 如何降低顯示的形式

回答

相關問題