모달은 수직으로 정렬 중심이 스크롤

-1

와 나는 부트 스트랩 모달을 사용하고, 나는이 구조 모달 신체 내부의 버튼이있는 목록을 가지고 싶다 :모달은 수직으로 정렬 중심이 스크롤

IMAGE   IMAGE  IMAGE  IMAGE 
    All Options  Option1  Option2  Other Option 

    IMAGE   IMAGE  IMAGE  IMAGE 
    Option3   Option4  Option5  ... 

    IMAGE    
    Option7

그래서 같은 여백 사이를 단추 및 모든 목록 항목은 수직 모서리로 정렬되고 스크롤은 기본 모달 높이보다 단추가 더 많이 차지할 수 있기 때문에 정렬됩니다.

달성 방법을 알고 계십니까? 저는 다음과 같이하고 있습니다 : http://jsfiddle.net/znhgdzL7/,하지만 작동하지 않습니다.

출처

2017-09-13 JonD

CSS에 최대 높이와 오버 플로우를 추가했습니다. 그게 당신의 문제를 해결할 수 있을까요? 원하는 값이 아닐 수도 있지만 적절하게 조정할 수 있습니다. 콘텐츠를 가로 최대로 유지하려면 CSS에 wrap 속성을 추가해야합니다. 새로운 바이올린을보십시오.

display: flex; 
    flex-wrap:wrap; 
    max-height:50px; 
    overflow-y:auto;

새 바이올린 : http://jsfiddle.net/djwave28/znhgdzL7/7/

출처

2017-09-13 22:44:47 Daniel

고맙지 만 "http://jsfiddle.net/znhgdzL7/3/"옵션이있는이 예제에서는 스크롤이 나타나지 않고 목록 항목이 모달 외부에 있습니다. 또한 이미지는 중앙에서 텍스트와 수직으로 정렬되지 않습니다. – JonD

그 바이올린은 작동하지 않는 것 같아요 – Daniel

신경 쓰지 마세요. 끝내주는 말은 엉망이되었습니다. – Daniel

확인이 : http://jsfiddle.net/znhgdzL7/10/이

모달 지금 많은 옵션을 처리 할 수 있습니다.

나는 또한 HTML을 업데이트

img{ 
    width: 30px; 
    height: 30px; 
    margin-bottom: 20px; 
} 
.row > div { 
    margin-bottom: 20px; 
    text-align: center; 
} 
.categories-list { 
max-height: 400px; 
overflow-y: auto; 
}

, 당신은 단지 jsfiddle 링크를 확인할 수 있습니다 여기

는 CSS입니다.

출처

2017-09-14 02:54:39

또한 출력 컨테이너의 브라우저 크기를 조정하여 모달이 스크롤을 처리하는 방법을 확인하십시오. –

모달은 수직으로 정렬 중심이 스크롤

답변

관련 문제