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;
    }
}

停止Bootstrap Wrapping

1 个答案: