이 글에서는 주로 ootstrap3의 컨테이너와 컨테이너_플루이드의 차이점을 소개합니다. .container와 .container_fluid는 부트스트랩의 두 가지 다른 외부 컨테이너입니다. 도움이 필요한 친구들이 참고할 수 있고, 모두에게 도움이 되기를 바랍니다.
.container와 .container_fluid는 부트스트랩의 두 가지 다른 유형의 외부 컨테이너입니다. 공식 설명에 따르면 둘 사이의 차이점은 다음과 같습니다.
.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; }
관련 권장사항:
Windows Server 2016에서 Hyper-V를 통해 Liunx Container를 설치하는 방법에 대한 자세한 설명(그림)
컨테이너 이벤트 컨테이너 기준 event Laravel WEB APP
Laravel5의 컨테이너, 명령 버스, 이벤트에 대하여
위 내용은 bootstrap3의 컨테이너 및 컨테이너_유체 외부 컨테이너에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!