具有最大值的引导模态窗口动态宽度？答案

【问题标题】：bootstrap modal window dynamic width with max value?具有最大值的引导模态窗口动态宽度？
【发布时间】：2017-07-31 02:29:30
【问题描述】：

我有一个引导模式窗口，我需要根据显示的内容动态调整大小，最大高度和宽度为 95%，滚动条自动溢出。我是 CSS 的初学者，所以如果我做的事情完全错误/愚蠢，请多多包涵。

高度效果很好，它动态调整大小，如果达到最大值，它会溢出滚动条。我无法工作的宽度。我可以让它填满整个页面，或者保持很小，但不能让它动态调整大小。我知道将样式内联是不好的做法，但我只是为了这个页面而这样做。

我的引导模式：

    <div class=modal fade" id="myModal" tabindex=-1 role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body" style="overflow-x:auto;overflow-y:auto;max-height:1000px;max-width:95%;">
                     ... close all the above tags w/o anything but standard div/span for modal message and footer

我认为问题在于引导模式有一个我认为我无法覆盖的默认宽度值（基于大小，如默认值、modal-sm 或 modal-lg）。任何线索我该怎么做？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

您可以通过以下方式根据内容优化模态框的高度和宽度--

工作示例

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

<!DOCTYPE html>
<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

           </head>
<body >
 <button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 <div class="modal fade" id="myModal" tabindex=-1 role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                     <p>close all the above tags w/o anything but standard div/span for modal message and footer............................................................................................................................................................................................</p>
                     </div>
                     </div>
                     </div>
                     </div>
</body>

</html>

【讨论】：

嗯，这确实会动态调整模态窗口的大小，但溢出似乎不起作用。模态将扩展超出页面的高度和宽度。我尝试添加 max-height 和 max-width，但模态框内的内容的大小不正确。
我可以通过在 .modal 上设置宽度来使其“足够接近”