如何動態調整 Twitter Bootstrap 模態的大小以適應可變內容？

針對可變內容動態調整Twitter Bootstrap 模態的大小

處理模態中的各種內容類型時，例如影片、圖像或文本，確保模式的大小根據內容動態調整可能具有挑戰性。大多數線上解決方案僅適用於使用單一參數調整大小。

可用於處理這種情況的HTML 程式碼，結合Ajax 進行內容檢索，如下所示：

<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中文網其他相關文章！