停止引导包装

Question

当我调整浏览器的宽度时，我注意到我的“舞台”列表项折叠并相互堆叠。我知道这是默认行为，但我希望它们以一定的宽度消失。现在，最右边的列在所有列消失之前折叠。我希望它们在崩溃之前消失。有人可以告诉我怎么做吗？我不知道如何使用获取媒体查询（如果需要）在 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;
    }
}