창 크기가 아닌 컨테이너 크기에 부트 스트랩 스캐 폴딩 적용

Twitter Bootstrap으로 빌드 된 단일 페이지 응용 프로그램이 있습니다. 내 응용 프로그램에는 일반적으로 페이지 너비의 70 %를 차지하고 가로로 가운데에있는 여러 모달 대화 상자가 있습니다. 내 페이지와 모달 설정은 다음과 같이이다 :창 크기가 아닌 컨테이너 크기에 부트 스트랩 스캐 폴딩 적용

enter image description here

내가 모달 내부의 열이있는 행을 배치했다. 페이지 크기를 조정할 때 col-md-* 및 col-sm-*은 윈도우 크기에 따라 다르며 주변 컨테이너의 크기에 의존하지 않으므로이 열은 실제로 늦게 col-sm-6 스타일을 사용합니다. 따라서 내 페이지가 예 : 여전히 가로가 1200 픽셀 인 경우 모달의 크기는 840 픽셀이므로 col-sm-* 클래스를 사용하려면 열이 필요합니다.

Windows 크기가 아닌 컨테이너의 크기에 따라 클래스를 적용하도록 부트 스트랩에 지시하는 방법이 있습니까?

출처

2015-02-03 WeSt

회원님이'COL 여기에 무엇을 의미하는지 확인 - * - * '사용 비율 그들이 의미 창문이 아닌 컨테이너의 크기를 취하십시오. – DavidG

@DavidG 클래스 자체는 백분율을 사용하지만 어떤 클래스가 사용되는지는 브라우저 너비에 따라 결정됩니다. 'col-sm- *'클래스는 너비 (≥768px), 너비 (≥992px)를 갖는 디바이스의 경우'col-md- *'에 사용됩니다. 페이지 자체가 여전히 992 픽셀 이상이지만 'col-sm- *'클래스가 모달 내부에서 사용되도록이 동작을 변경해야합니다. – WeSt

어떤 Bootstrap 버전을 사용하고 있습니까? 는 부트 스트랩 3에서 당신은 사용하여 모달 대화 상자를 강제 할 수

.modal .modal-dialog { width: 900px; }

여기에 관련 게시물이 있습니다 : 이 how-can-i-change-the-default-width-of-a-twitter-bootstrap-modal-box

출처

2015-02-03 10:21:47 beimax

현재'Bootstrap'의 out-of-the-box 모달을 사용하고 있지 않습니다. 그게 내 문제를 해결한다면, 나는 전환 할 수 있습니다. 내 모달이나 다른 트릭에서 사용할 수있는 특정 "반응 형 컨테이너 클래스"가 있다고 생각했습니다. – WeSt

창 크기가 아닌 컨테이너 크기에 부트 스트랩 스캐 폴딩 적용

답변

관련 문제