부트 스트랩 랩핑 중지

Question

브라우저의 너비를 조정할 때 "스테이지"목록 항목이 접히고 서로 쌓이는 것을 보았습니다. 나는 그것이 디폴트 행동 인 것을 안다. 그러나 나는 그들이 특정 폭에서 사라지기를 바란다. 현재 모든 열이 사라지기 전에 가장 오른쪽의 열이 축소됩니다. 나는 그들이 붕괴되기 전에 사라 지길 바란다. 누군가 그걸하는 법을 보여줄 수 있습니까? jsFiddle에서 작동하는 미디어 쿼리 (필요한 경우)를 사용하는 방법을 알아낼 수 없으므로 아래에 나와 있습니다. 마크 업의 나머지 부분은 jsFiddle에 있습니다.

@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

잘

http://jsfiddle.net/6dFSS/

, 나는 그것을 알아 냈다. 줄을 감싸기 전에 줄이 끊어지지 않도록하는 열쇠는 사용할 수있는 다양한 해상도를 사용하기 위해 미디어 쿼리를 올바르게 설정하는 것입니다. 최소한 타겟으로 삼는 것.

제어하려는 컨테이너에서 여백과 여백이 0인지 확인하십시오. 이렇게하면 폭의 실제 레이아웃을 얻을 수 있습니다. 그런 다음 필요한 모든 미디어 쿼리를 조합하십시오. 다음은 부트 스트랩 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; 
    } 
}