引導：如何使colums包裹@ 1,024像素

簡而言之如何使these columns（的jsfiddle）以1,024像素包EVEN。 Cuz，（@ 1024px）IS響應，但「彈性」是醜陋的。引導：如何使colums包裹@ 1,024像素

我想通之前，我開始「劈砍而去」，我會問...

感謝

2012-09-29 sleeper

嵌入式結果：http://jsfiddle.net/pkdsleeper/ZJJFJ/embedded/result/我討厭把它分解給你，但是你的頁面在Chrome上不能正確加載。頁面的頂部部分根本不可見（只有大約一半的箭頭可見和在下面）。 –

另外，你想要做什麼？如果你不想有列，爲什麼不*使用'span6，span3和span3'？或者你想要一個'max-width'，這樣列的寬度就不再增長了？ –

@Jared Farrish Thx回覆。我只裝載了那一行。如果這就是「破」的意思，我只是孤立我希望更新的代碼。 2.我想要的是在1024像素...即在風景中移動（點燃火焰等），顏色應該堆疊。就像他們在較小的屏幕尺寸下一樣。 – sleeper

在基本層面，可以mimic the Bootstrap method：

// 
// Responsive: Landscape phone to desktop/tablet 
// -------------------------------------------------- 
@media (max-width: 767px) { 
    // GRID & CONTAINERS 
    // ----------------- 
    // Remove width from containers 
    .container { 
    width: auto; 
    } 

    // Fluid rows 
    .row-fluid { 
    width: 100%; 
    } 

    // Make all grid-sized elements block level again 
    [class*="span"], .row-fluid [class*="span"] { 
    float: none; 
    display: block; 
    width: 100%; 
    margin-left: 0; 
    .box-sizing(border-box); 
    } 
    .span12, 
    .row-fluid .span12 { 
    width: 100%; 
    .box-sizing(border-box); 
    } 
}

這當然是LESS CSS 。這是編譯LESS：

[class*="span"], .row-fluid [class*="span"] { 
    -moz-box-sizing: border-box; 
    display: block; 
    float: none; 
    margin-left: 0; 
    width: 100%; 
}

這裏是一個小片段，開始複製此任務：

@media all and (min-width: 1000px) { 
    [class*="span"], .row-fluid [class*="span"] { 
     width: 100%; 
    } 
}

http://jsfiddle.net/userdude/ZJJFJ/1/

還有一個responsive CSS file for greater than 1200px，這也可能是有益的。如果你用LESS做到這一點，我相信它會更簡單，而不是純粹的CSS。

來源

2012-09-29 02:37:03

它的工作原理！你是先生，是一位紳士和學者:)而且很少......我是一個很少的粉絲！謝謝您的幫助。 – sleeper

引導：如何使colums包裹@ 1,024像素

回答

相關問題