Question

我使用Bootstrap创建了一个全屏模式，当内容太多时我无法滚动。这是我的代码：

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

完整JSFIDDLE。

Answer 1

使用overflow: auto;到.modal-full

.modal-dialog {
    position: fixed;
    margin: 0;
    width: 100%;
    height: 100%;
    padding: 0;
}

.modal-full {
    min-width: 100%;
    overflow:auto;
}

    .modal-full .modal-content {
        min-height: 100vh;
    }

 <div class="modal-dialog modal-full">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title" id="myModalLabel">Test</h4>
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        </div>
                                        <div class="modal-body">
                                            <h6>Text in a modal</h6>
                                            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                                            <hr>
                                            <h6>Overflowing text to show scroll behavior</h6>
                                            <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                                            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                                            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->

Answer 2

用此替换css

.modal-full .modal-content {
   min-height: 100vh;
   max-height: 100vh;
   overflow-y: scroll;
}

Answer 3

Bootsrap模态默认情况下具有此功能。

您只需要对.modal-dialog和.modal-content类进行编辑以使模式全屏显示。请查看此fiddle中的示例：）

.modal-dialog {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

如何在引导模态中添加滚动？

3 个答案: