小工具儀表板的腳手架

我正在研究一個具有小工具儀表板的項目，這看起來像是一個更漂亮的iGoogle版本。目前，每個.widget本質上是一個寬度爲4,8和12（我們有12列布局）的引導「列」。但是，這根本不爲它留下的空白空間，並導致不可預測的換行符（尤其是當在左部件比右側小部件更長）工作：小工具儀表板的腳手架

可有人請提供正確的小部件樣式？謝謝！

Plunker：http://plnkr.co/edit/speljn9WYZ2r7g6NnnLD?p=preview

來源

2015-08-31 Sayak Banerjee

如果你可以創建你的代碼的演示，我們可以調試issue.http： //stackoverflow.com/help/mcve –

不幸的是，我所有的代碼都在公司網絡上，我無法輕易分享。但是我創建了一個使用引導類的解鎖器來說明我的問題。 –

回答我的問題，這是小工具的風格我最終使用：

.widget { 
    background: #fff; 
    border: 1px solid #c2c0c5; 
    border-top-width: 2px; 
    padding: 15px; 
    margin: 10px; 
    font-family: "ProxReg", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    display: inline-table; 

    &.widget-1 { 
    width: calc(33.3333333% - 20px); 
    } 

    &.widget-2 { 
    width: calc(66.6666666% - 20px); 
    } 

    &.widget-3 { 
    width: calc(100% - 20px); 
    } 

    @media screen and (max-width: $break-small) { 
    &.widget-1, 
    &.widget-2, 
    &.widget-3 { 
     width: calc(100% - 20px); 
    } 
    } 
}

來源

2015-08-31 19:34:19

小工具儀表板的腳手架

回答

相關問題