>백엔드 개발 >PHP 튜토리얼 >bootstrap3의 컨테이너와 컨테이너_유체 외부 컨테이너의 차이점에 대한 설명

bootstrap3의 컨테이너와 컨테이너_유체 외부 컨테이너의 차이점에 대한 설명

小云云
小云云원래의
2017-12-05 13:09:241575검색

.container 및 .container_fluid는 부트스트랩의 두 가지 다른 유형의 외부 컨테이너입니다. 이 글에서는 bootstrap3의 컨테이너와 컨테이너_플루이드의 차이점을 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

 .container 클래스는 반응형 레이아웃을 지원하는 고정 너비 컨테이너에 사용됩니다.

  .container-fluid 클래스는 너비가 100%이고 전체 뷰포트를 차지하는 컨테이너에 사용됩니다.

일명 고정 너비는 개발자가 컨테이너의 너비를 직접 설정할 수 없지만 부트스트랩은 화면 너비를 기반으로 내부적으로 미디어 쿼리를 사용하여 고정 너비를 설정할 수 있도록 도와주며 적응형입니다.

학위이며 적응이 가능합니다. 어떤 경우에도 반응형 레이아웃의 외부 레이아웃 컨테이너에 고정 너비 값을 수동으로 설정해서는 안 됩니다.

.container-fluid는 자동으로 외부 창을 100%로 설정합니다. 외부 창이 본문인 경우 화면 크기에 관계없이 전체 화면으로 표시되며 반응형 레이아웃이 자동으로 구현됩니다.

다음은 참조용으로 빌린 코드입니다.

/*0-768px以上宽度container为100%*/
.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
 .container {
 width: 750px;
 }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
 .container {
 width: 970px;
 }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
 .container {
 width: 1170px;
 }
}
/*container-fluid为100%*/
.container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}

위 내용은 bootstrap3의 컨테이너와 컨테이너_플루이드 외부 컨테이너의 차이점에 대한 설명입니다. 모두에게 도움이 되기를 바랍니다.

관련 추천:

Bootstrap3.0 학습(1)_html/css_WEB-ITnose

bootstrap3.3.2를 빠르게 배우는 방법

Bootstrap3-새로운 기능

위 내용은 bootstrap3의 컨테이너와 컨테이너_유체 외부 컨테이너의 차이점에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.