ブートストラップモーダルウィンドウ最大値の動的幅？

私は、表示されているコンテンツに基づいて動的にサイズを設定する必要があるブートストラップモーダルウィンドウを持っています。最大高さと幅は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

私は、問題は、ブートストラップモーダル（デフォルト、モーダル-SMなどのサイズに基づいて、私はオーバーライドすることができるとは思わないデフォルトの幅の値を持っているということだと思いますモーダル-Ig）。どのように私はこれを行うことができますか？

出典

2017-03-09 user797963

あなたは、次のway--

実施例

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

出典

2017-03-10 05:19:16 neophyte

うーん、これは動的にサイズないの内容に基づいて、モーダルの高さと幅を最適化することができますモーダルウィンドウですが、オーバーフローは機能していないようです。モーダルはページの高さと幅を超えて拡大します。 max-heightとmax-widthを追加しようとしましたが、モーダル内のコンテンツのサイズが間違っています。 – user797963

私はこれを 'close'にするには、.modalの幅を設定することで – user797963

ブートストラップモーダルウィンドウ最大値の動的幅？

答えて

関連する問題