为什么分页显示在 Firefox 的主要部分之外？

Question

当我插入一些幻灯片大内容和一些幻灯片短内容时，为什么分页显示在 Firefox 的主要部分之外，而不是 firefox 中的问题，而不是 chrome 等其他浏览器。我会尝试我认为两个 bootstrap 4 列高度在 Firefox 中不起作用，在 chrome 浏览器中也能正常工作，请帮助我。提前致谢。

看到我的附件图片在 Firefox 中有什么问题。

发布内容较短的幻灯片：

没有问题的大内容幻灯片：

        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

.slider-content {
                background-color: #000;
                padding: 10%;
                color: #fff;
            }
            .slider-content h1 {
                margin-bottom: 30px;
            }
            .slider-content p {
                font-size: 18px;
                line-height: 26px;
            }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="custom-slider">
            <div class="container-fluid">
                <div class="row">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                    <h1>What is Slide 01?</h1>
                                    <p>Lorem Ipsum is simply dummy text of the prin, remaining essentially unchanged. It was popularised in the 1960s with the release of</p>
                                    <p>Letraset sheets containing desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                    <h1>What is Slide 02?</h1>
                                    <p>Lorem Ipsum is </p>
                                    <p>Letraset sheets including versions of Lorem Ipsum.</p>
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                    <h1>What is Slide 03?</h1>
                                    <p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

问题在于不同幻灯片上的内容。第一张幻灯片的内容比其他两张多。按照以下步骤操作。

删除padding: 10%并将display: flex和align-items: center给.slider-content
使用flex，您可以调整内容居中。
将这些内容包装在 div
给 min-height 给 .swiper-slide

var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });

.slider-content {
                background-color: #000;
                /*padding: 10%;*/
                color: #fff;
                display: flex; /* Added */
                align-items: center;
            }
            .slider-content h1 {
                margin-bottom: 30px;
            }
            .slider-content p {
                font-size: 18px;
                line-height: 26px;
            }
            /* New CSS */
            .swiper-slide {
              min-height: 370px; /* give as per your requirement */
            }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js'></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="custom-slider">
            <div class="container-fluid">
                <div class="row">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                <!-- caption wrapper -->
                                    <div>
                                      <h1>What is Slide 01?</h1>
                                      <p>Lorem Ipsum is simply dummy text of the prin, remaining essentially unchanged. It was popularised in the 1960s with the release of</p>
                                      <p>Letraset sheets containing desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                    </div>
                                 <!-- caption wrapper ends -->   
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                  <!-- caption wrapper -->
                                    <div>
                                      <h1>What is Slide 02?</h1>
                                      <p>Lorem Ipsum is </p>
                                      <p>Letraset sheets including versions of Lorem Ipsum.</p>
                                    </div>
                                  <!-- caption wrapper ends -->  
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                            <div class="swiper-slide d-flex flex-wrap">
                                <div class="col-md-6 bg-very-dark-purple slider-content">
                                  <!-- caption wrapper -->
                                    <div>
                                      <h1>What is Slide 03?</h1>
                                      <p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                    </div>
                                   <!-- caption wrapper ends --> 
                                </div>
                                <div class="col-md-6 position-relative slider-image background-cover" style="background-image: url('http://placekitten.com/1000/500');background-size: cover;"></div>
                            </div>
                        </div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </section>

工作fiddlehere

为什么分页显示在 Firefox 的主要部分之外？

Why pagination display out of main section in Firefox by swiper?

html

css

swiper

bootstrap-4