Bootstrap에서 모달의 너비와 높이 변경

JMA

Bootstrap에서 모달의 너비와 높이를 변경하고 싶습니다. 모달의 최대 너비를 900px로 설정하려면 어떻게해야합니까? 모달의 최대 높이를 화면 높이에서 패딩 20px를 뺀 값으로 설정하려면 어떻게해야합니까?

이 코드를 사용했습니다.

.modal-dialog {
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 40px);
}

그러나 작동하지 않습니다.

수직 및 수평 중앙에 있어야합니다.

프라 빈 쿠마르 푸루 쇼타 만

이미 모달 창이 positioned relative이므로 다음을 사용할 수 있습니다.

.modal-dialog {
  width: auto;
  height: auto;
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}

.modal-dialog .modal-content {
  height: 100%;
}

위의 CSS는 모달을 fixed제자리에 10px놓고 4면 의 오프셋에서 보이게합니다 .

출력 : http://output.jsbin.com/kepuximasi

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

yiistrap에서 모달의 높이와 너비 변경

분류에서Dev

Shiny 및 Shinydashboard에서 verbatimTextOutput의 너비와 높이를 변경하는 방법

분류에서Dev

높이와 너비 사이의 최대 값에 따라 배경 이미지 크기 변경

분류에서Dev

Flutter에서 Column의 너비와 높이를 변경하는 방법은 무엇입니까?

분류에서Dev

codemirror의 높이와 너비를 각도로 변경

분류에서Dev

CSS에 지정된 이미지의 너비와 높이를 변경하는 방법

분류에서Dev

높이와 너비에 의존하지 않는 테두리 반경

분류에서Dev

Yii Listview의 _view 템플릿에서 이미지 높이 및 너비 변경

분류에서Dev

레이아웃의 높이와 너비를 변경할 수 없습니다.

분류에서Dev

div 사이의 모든 요소에서 여백, 너비, 높이, 상단, 왼쪽, 패딩 변경

분류에서Dev

TextField의 너비와 높이

분류에서Dev

div 높이와 너비를 이미지에 전달

분류에서Dev

파이썬 glfw에서 모니터의 너비와 높이를 얻는 방법

분류에서Dev

Fragment의 onCreateView ()에서 너비와 높이 결정

분류에서Dev

Fragment의 onCreateView ()에서 너비와 높이 결정

분류에서Dev

jpeg 헤더 구조에서 너비와 높이의 위치

분류에서Dev

그림의 URI에서 너비와 높이 가져 오기

분류에서Dev

입력 상자 너비와 높이를 외부 div의 너비와 높이에 대해 100 %로 만들기

분류에서Dev

보기에서 컨테이너의 너비와 높이 가져 오기

분류에서Dev

보기에서 컨테이너의 너비와 높이 가져 오기

분류에서Dev

D3에서 삼각형의 높이와 방향 변경

분류에서Dev

너비가 부모와 높이가 내용을 감싸는 경우에도 추가 공간을 만드는 RecyclerView

분류에서Dev

WinJS의 ListView는 listItem에 높이와 너비가 지정된 경우 뒤로 점프합니다.

분류에서Dev

각 레코드 Crystal 보고서의 Blob 개체 너비와 높이를 변경하는 방법은 무엇입니까?

분류에서Dev

높이와 너비에 따라 장치의 방향 설정

분류에서Dev

화면 크기에 맞게 CGRect의 높이와 너비 설정

분류에서Dev

텍스트 영역 너비와 높이가 표 셀에서 변경되지 않습니다.

분류에서Dev

codenameone에서 구성 요소의 크기 (너비 및 높이)를 변경하는 방법

분류에서Dev

Fancybox 2는 매개 변수에서 너비와 높이를 설정합니다.

Related 관련 기사

  1. 1

    yiistrap에서 모달의 높이와 너비 변경

  2. 2

    Shiny 및 Shinydashboard에서 verbatimTextOutput의 너비와 높이를 변경하는 방법

  3. 3

    높이와 너비 사이의 최대 값에 따라 배경 이미지 크기 변경

  4. 4

    Flutter에서 Column의 너비와 높이를 변경하는 방법은 무엇입니까?

  5. 5

    codemirror의 높이와 너비를 각도로 변경

  6. 6

    CSS에 지정된 이미지의 너비와 높이를 변경하는 방법

  7. 7

    높이와 너비에 의존하지 않는 테두리 반경

  8. 8

    Yii Listview의 _view 템플릿에서 이미지 높이 및 너비 변경

  9. 9

    레이아웃의 높이와 너비를 변경할 수 없습니다.

  10. 10

    div 사이의 모든 요소에서 여백, 너비, 높이, 상단, 왼쪽, 패딩 변경

  11. 11

    TextField의 너비와 높이

  12. 12

    div 높이와 너비를 이미지에 전달

  13. 13

    파이썬 glfw에서 모니터의 너비와 높이를 얻는 방법

  14. 14

    Fragment의 onCreateView ()에서 너비와 높이 결정

  15. 15

    Fragment의 onCreateView ()에서 너비와 높이 결정

  16. 16

    jpeg 헤더 구조에서 너비와 높이의 위치

  17. 17

    그림의 URI에서 너비와 높이 가져 오기

  18. 18

    입력 상자 너비와 높이를 외부 div의 너비와 높이에 대해 100 %로 만들기

  19. 19

    보기에서 컨테이너의 너비와 높이 가져 오기

  20. 20

    보기에서 컨테이너의 너비와 높이 가져 오기

  21. 21

    D3에서 삼각형의 높이와 방향 변경

  22. 22

    너비가 부모와 높이가 내용을 감싸는 경우에도 추가 공간을 만드는 RecyclerView

  23. 23

    WinJS의 ListView는 listItem에 높이와 너비가 지정된 경우 뒤로 점프합니다.

  24. 24

    각 레코드 Crystal 보고서의 Blob 개체 너비와 높이를 변경하는 방법은 무엇입니까?

  25. 25

    높이와 너비에 따라 장치의 방향 설정

  26. 26

    화면 크기에 맞게 CGRect의 높이와 너비 설정

  27. 27

    텍스트 영역 너비와 높이가 표 셀에서 변경되지 않습니다.

  28. 28

    codenameone에서 구성 요소의 크기 (너비 및 높이)를 변경하는 방법

  29. 29

    Fancybox 2는 매개 변수에서 너비와 높이를 설정합니다.

뜨겁다태그

보관