データ-スライドは<strong>データ・スライド拳<strong>モーダル体</strong>の</strong>サイズはのために異なっています場合、私はここで、ブートストラップモーダル内<strong>カルーセル</strong>効果を使用しようとしているカルーセル

Question

のために発生したときに固定ブートストラップモーダル高さを設定する方法第2のスライドの中のより少ないコンテンツは、第2のdivのサイズがより小さい高さに最小化される。

すべて固定サイズを持つ可能性はありますか？カルーセルアイテムデータスライドを実行していますか？

<!-- Modal --> 
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel">Title</h4> 
      </div> 
      <div class="modal-body"> 
      <div class="header">       
       <p class="note">Header Note</p>  
      </div>  
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> 
         <div class="carousel-inner" role="listbox"> 
         <div class="carousel-item active"> 
         <div id="postage-due-details"> 
          <p>This is First Page</p> 
          <span class="content-label">APR 1</span><br/> 
          <span>XXXXXXXXXXXX</span><br/> 
          <span class="content-label">XXXXXXXXX</span><span class="content-value">XXXX</span><br/> 
          <span class="content-label">XXXXXXXXXX</span><span class="content-value"> XXX</span><br/> 
          <span style="margin-top: 0px;margin-bottom: 3em;">XXXXXX</span> 
          <span style="float: right;"> 
          <input type="submit" class="btn btn-primary" name="pay-shortpay" value="Pay Now" 
          href="#carousel-example-generic" id="paynowbtn" data-slide="next"> 
          </span> 
          <hr style="padding: 5px;"></hr> 
          <span>XXXXX</span><br/> 
          <span>XXXX</span><br/> 
          <span>XXXXXXXX</span><br/> 
          <span>XXXXXX</span><br/> 
          <span>XXXXXX</span> 
          <span style="float: right;"> 
          <input type="submit" class="btn btn-primary" name="pay-shortpay" href="#carousel-example-generic" id="paynowbtn" value="Pay Now" data-slide="next"> 
          </span> 
         </div> 
         </div> 
         <div class="carousel-item"> 
         <p>This is Second Page</p> 
         <input type="submit" class="btn btn-primary" href="#carousel-example-generic" id="paynowbtn" value="Go Back" data-slide="prev"> 
         <div id="preview-amount-wrapper"> 

         </div> 
         </div> 
         </div> 
       </div> 
      </div> 
     </div> 
     </div> 
    </div> 

例：

http://www.bootply.com/opdfUNQsDy

の両方が

Answer 1

CSS

.modal-content{ 
    height: 300px; 
    overflow: scroll; 
} 

同じ高さを持っている必要があります

固定された高さを与えます。