컨테이너 유체 및 컨테이너

방금 3.1을 다운로드하고 문서에서 발견했습니다 ...

가장 바깥 쪽 .container을 로 변경하여 고정 너비 격자 레이아웃을 전체 너비 레이아웃으로 바꿉니다 .container-fluid.

에서 찾고 bootstrap.css, 그가 나타납니다 .container-fluid동일합니다 .container. 둘 다 동일한 CSS를 가지며 모든 인스턴스 .container-fluid는와 쌍을 이루고 .container모든 열 클래스는 백분율로 지정됩니다.

예제를 사용하여 문제를 해결할 때 모든 것이 유동적으로 보였으므로 아무런 차이가 없었습니다.

Bootstrap을 처음 사용함에 따라 뭔가 빠진 것으로 가정합니다. 누군가 잠시 시간을 내서 깨달을 수 있을까요?

빠른 버전 : .container 부트 스트랩 (xs, sm, md, lg)의 각 화면 크기에 대해 하나의 고정 너비가 있습니다. .container-fluid사용 가능한 너비를 채우기 위해 확장됩니다.

이러한 CSS 행 container과 의 차이점은 다음 과 container-fluid같습니다.

@media (min-width: 568px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

웹 페이지를보고있는 뷰포트의 너비에 따라 container클래스는 해당 div에 특정 고정 너비를 제공합니다. 이 선은에 대한 형식으로 존재하지 않으므로 container-fluid뷰포트 너비가 변경 될 때마다 너비가 변경됩니다.

예를 들어, 브라우저 창의 너비가 1000px라고 가정하십시오. 최소 너비 992px보다 크기 때문에 .container요소의 너비는 970px입니다. 그런 다음 브라우저 창을 천천히 넓 힙니다. 너비는 .container1200px가 될 때까지 변경되지 않으며 너비가 1170px로 이동하여 더 큰 브라우저 너비를 유지합니다.

귀하의 .container-fluid브라우저 폭에 아주 작은 변경으로 요소는, 다른 한편으로는, 지속적으로 크기가 조정됩니다.

나는 당신이 containervs container-fluid와 그리드에 반응하는 것과 반응하지 않는 것의 차이점 이라고 말하고 있다고 생각합니다 . 이것은 사실이 아닙니다 ... 무언가가 말하면 너비가 고정되어 있지 않습니다 ... 전체 너비입니다!

설명하기 어렵 기 때문에 예제를 살펴 보겠습니다.

예 하나

container-fluid:

http://www.bootply.com/119981

컨테이너가 전체 화면을 차지하는 방식을 볼 수 있습니다 container-fluid.

이제 다른 하나의 법선 container을보고 미리보기의 가장자리를 봅니다.

예 2

container

http://www.bootply.com/119982

이제 예제에서 공백이 보입니까? 너비가 고정되어 있기 때문입니다 container! 두 예제를 서로 다른 두 개의 탭에서 열고 앞뒤로 전환하는 것이 더 합리적 일 수 있습니다.

편집하다

한 번에 두 컨테이너를 모두 사용하는 예가 더 좋습니다. 이제 차이점을 알 수 있습니다!

http://www.bootply.com/119983

이것이 약간의 명확화에 도움이 되었기를 바랍니다.

둘 다 .container와 .container-fluid(즉, 그들은 화면 너비에 따라 레이아웃을 변경) 반응하지만, 다른 방법에 (내가 아는, 명명은 그런 식으로 소리를하지 않습니다).

짧은 답변:

.container 삐걱 거리거나 고르지 않은 크기로

.container-fluid 가로 / 세로 크기 조정 : 100 %.

기능적인 관점에서 :

.container-fluid창 / 브라우저의 너비를 원하는만큼 변경하면 크기가 계속 변경되어 다른 방식과 달리 측면에 빈 공간이 남지 .container않습니다. (따라서 "디지털", "이산 적", "청크"또는 "정량화"와 달리 "유체"라는 이름이 붙습니다).

.container몇 가지 특정 너비에서 청크로 크기가 조정됩니다. 다시 말하면, 화면 너비의 범위가 다른 "일정한"너비와 다른 특정 너비가됩니다.

의미론 : "고정 너비"

명명 혼동이 어떻게 발생할 수 있는지 알 수 있습니다. 기술적으로 우리 .container는 "고정 너비" 라고 말할 수 있지만 모든 세분화 된 너비에서 크기가 조정되지 않는다는 의미에서만 고정됩니다. 실제로는 크기가 변할 수 있기 때문에 항상 특정 픽셀 너비로 유지된다는 의미에서 "고정"되지 않습니다.

기본 관점에서 :

.container-fluidCSS 속성 width: 100%;이 있으므로 모든 화면 너비 단위로 계속 다시 조정됩니다.

.container-fluid {
  width: 100%;
}

.container'너비 = 800 픽셀'(또는 em, rem 등)과 같이 화면 너비가 다른 특정 픽셀 너비 값을 갖습니다. 이것은 물론 화면 너비가 화면 너비 임계 값을 초과 할 때 요소 너비가 갑자기 다른 너비로 점프하는 원인입니다. 그리고이 임계 값은 CSS3 미디어 쿼리에 의해 제어되므로 화면 너비 범위와 같은 조건에 따라 다른 스타일을 적용 할 수 있습니다.

@media screen and (max-width: 400px){
  .container {
    width: 123px;
  }
}
@media screen and (min-width: 401px) and (max-width: 800px){

  .container {
    width: 456px;
  }
}
@media screen and (min-width: 801px){
  .container {
    width: 789px;
  }
}

을 넘어서

.container미디어 쿼리는 .container백그라운드에서 부트 스트랩에 의해 구현되는 방식이기 때문에 고정 너비 요소를 요소가 아닌 미디어 쿼리를 통해 반응 형으로 만들 수 있습니다 (코드에 대한 JKillian의 답변 참조).

뷰포트 크기에 약간의 차이 가 .container-fluid있을 때 마다 페이지가 변형되도록 하려면 사용하십시오 .

.container페이지를 "중단 점" 이라고도하는 4 가지 크기로만 변형 시키 려면 사용하십시오 .

크기에 해당하는 중단 점은 다음과 같습니다.

• 매우 작음 : (모바일 해상도 만)
• 작게 : 768px (태블릿)
• 중간 : 992px (랩탑)
• 대형 : 1200px (랩탑 / 데스크톱)

2019 업데이트

기본적인 차이점은 container반응 적으로 확장되는 반면 container-fluid항상 width:100%입니다. 따라서 루트 CSS 정의에서는 동일하게 나타나지만 자세히 살펴보면 .container미디어 쿼리에 바인딩되어 있음을 알 수 있습니다.

부트 스트랩 4

는 container5 폭을 갖는다 ..

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

부트 스트랩 3

는 container4 개 크기를 가지고있다. xs화면의 전체 너비 와 너비는 다음 미디어 쿼리에 따라 다릅니다.

    @media (min-width: 1200px) {
        .container {
            width: 1170px;
        }
    }
    @media (min-width: 992px) {
        .container {
            width: 970px;
        }
    }
    @media (min-width: 768px) {
        .container {
            width: 750px;
        }
    }

컨테이너 대 컨테이너 유체 데모

.container최대 너비 픽셀 값을 갖는 반면 .container-fluid최대 너비는 100 %입니다.

.container-fluid 창 / 브라우저의 너비를 원하는만큼 변경하면 크기가 계속 조정됩니다.

.container 미디어 쿼리에 의해 제어되는 몇 가지 특정 너비의 청크 크기 조정 .)

디스플레이 관점에서 볼 .container때 사용자가보고있는 것을 더 잘 제어 할 수 있으며 크기가 격자 크기와 동일합니다. 예를 들어 .col-xs, .col-sm, .col,와 .col-lg.

이것은 사용자 테스트를 수행 할 때 4 가지 크기의 디스플레이를 테스트 할 경우 모든 검증이 표시된다는 것을 의미합니다.

.container-fluidwitdh가 뷰포트 너비와 관련되어 있기 때문에 사용 하면 디스플레이가 동적이므로 변형이 훨씬 더 커지고 화면이 너무 크거나 화면 너비가 일반적이지 않은 사용자는 예상치 않은 결과를 볼 수 있습니다.

3.1에서 .container-fluid와 .container는 동일하고 컨테이너와 동일하게 작동하지만 제거하면 .container-fluid (전체 너비)와 같이 작동합니다. "Mobile First Approach"의 .container-fluid를 제거했지만 이제는 3.3.4로 돌아 왔습니다.

최신 부트 스트랩을 얻으려면 stackoverflow 에서이 게시물을 읽으 십시오 . 체크 아웃에 도움 이됩니다 .