[twitter-bootstrap] 컨테이너 유체 및 컨테이너

둘 다 .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 {
  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;
  }
}

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