Question

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

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

My Bootstrap模式：

    <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

我认为问题在于bootstrap模式有一个默认宽度值，我认为我不能覆盖（基于大小，如默认值，modal-sm或modal-lg）。我怎么能这样做？

Answer 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>

bootstrap模态窗口动态宽度是否具有最大值？

1 个答案: