Question

我试图在BootStrap模式中使用 carousel 效果，如果数据幻灯片第一个模态体的大小得到由于第二张幻灯片中的内容较少，第二格的大小最小化到较小的高度。

在执行数据幻灯片时，是否有可能为所有轮播项目设置固定尺寸？

   <!-- 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;
}

它会给出一个固定的高度。

如何为Carousel发生数据滑动时设置Bootstrap模态高度

1 个答案: