가변 콘텐츠에 대한 Twitter Bootstrap 모달의 크기를 동적으로 조정하는 방법은 무엇입니까?

가변 콘텐츠에 대해 Twitter Bootstrap 모달의 동적 크기 조정

모달 내에서 동영상, 이미지 또는 동영상과 같은 다양한 콘텐츠 유형을 처리할 때 텍스트의 경우 모달의 크기가 콘텐츠에 따라 동적으로 조정되도록 하는 것이 어려울 수 있습니다. 온라인에서 사용 가능한 대부분의 솔루션은 단일 매개변수를 사용하여 크기 조정만 지원합니다.

콘텐츠 검색을 위해 Ajax와 함께 이 상황을 처리하는 데 사용할 수 있는 HTML 코드는 다음과 같습니다.

<code class="html"><div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">
    </div>
</div></code>

다양한 솔루션을 실험한 결과 다음 코드는 내용에 따라 모달의 크기를 동적으로 조정하는 데 효과적인 것으로 나타났습니다.

.modal-dialog {
    position: relative;
    display: table; /* This is crucial */
    overflow-y: auto;
    overflow-x: auto;
    width: auto;
    min-width: 300px;
}

이 코드는 모달의 대화 상자가 테이블로 표시되어 상대적으로 배치되도록 보장합니다. 에는 자동 수직 및 수평 스크롤 기능이 있으며 모달 내의 콘텐츠에 따라 너비가 자동으로 조정됩니다. 모달이 너무 좁아지는 것을 방지하기 위해 최소 너비 300px을 설정했습니다.

위 내용은 가변 콘텐츠에 대한 Twitter Bootstrap 모달의 크기를 동적으로 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!