Stop Bootstrap Wrapping

Question

當我調整瀏覽器的寬度時，我注意到我的「Stage」列表項互相疊加併疊加在一起。我知道這是默認行爲，但我希望它們以一定的寬度消失。現在，在所有列消失之前，最右邊的列崩潰了。我希望他們在崩潰之前消失。有人能告訴我該怎麼做嗎？我不知道如何使用獲取媒體查詢（如果需要）在jsFiddle中工作，所以它在下面。其餘的標記在jsFiddle中。

http://jsfiddle.net/6dFSS/

@media screen and (min-width: 1025px){ 
.container { 
    width: 95%; 
    padding-top: 5px; 
} 

.navbar-default { 
    background-color: transparent; 
    border: none; 
    padding: 0; 
    margin: 0; 
} 
} 

@media screen and (min-width: 481px) and (max-width: 1024px) { 
#header { 
    font-size: 80%; 
} 

.navbar-default { 
    background-color: transparent; 
    border: none; 
    padding: 0; 
    margin: 0; 
} 
} 

@media screen and (max-width: 480px) { 
h3 { 
    font-size: 70%; 
} 

.navbar-default { 
    background-color: transparent; 
    border: none; 
    padding: 0; 
    margin: 0; 
} 
} 

Answer 1

好吧，我想通了。確保行在摺疊前摺疊的關鍵是確保正確設置媒體查詢以使用可用的各種分辨率。至少，你瞄準的那些。

確保您要控制的容器中的填充和邊距爲0。這樣，你可以得到一個真正的寬度佈局。然後組裝所有您需要的媒體查詢。以下是bootstrap http://getbootstrap.com/css/使用的媒體查詢。

下面是我現在使用的媒體查詢。我從原始問題中添加了一個，這樣我可以更緊密地控制標記如何隨着視口更改而變化。如果您的標記在達到可以摺疊它的分辨率之前進行包裝，請在不折疊的情況下查找標記適合的分辨率。在IE 11中，如果您爲開發人員工具點擊F12，則可以找到流行分辨率列表和視口大小。

/************************************************************************************ 
1366 and higher 
*************************************************************************************/ 
@media screen and (min-width: 1366px){ 
    .container { 
     width: 75%; 
     margin: 0; 
     margin-left: auto; 
     margin-right: auto; 
     padding: 0; 
     border: solid 1px #AABDCB; 
    } 
} 

/************************************************************************************ 
1025 up to 1365 
*************************************************************************************/ 
@media screen and (min-width: 1025px) and (max-width: 1365px){ 
    .container { 
     width: 95%; 
     margin: 0; 
     margin-left: auto; 
     margin-right: auto; 
     padding: 0; 
     border: solid 1px #AABDCB; 
    } 
} 

/************************************************************************************ 
smaller than 1024 
*************************************************************************************/ 
@media screen and (min-width: 481px) and (max-width: 1024px) { 
    .container { 
     width: 100%; 
     margin: 0; 
     padding: 0; 
    } 
} 

/************************************************************************************ 
smaller than 480 
*************************************************************************************/ 
@media screen and (max-width: 480px) { 
    .container { 
     width: 100%; 
     margin: 0; 
     padding: 0; 
    } 
}