Question

我的网站在台式机上看起来不错，但是我很难确保该网站使用Bootstrap 4可以在移动设备上响应。

我正在使用以前使用过的自定义列，它们似乎总是可以正常工作，但是在此项目中，列是彼此叠置的，而不是彼此堆叠。

我相信可能是因为该项目非常具体。也许是因为我的html页面的每个<sections>都有背景图片。我有很多部分，所以我将只提供HTML代码的几个部分。如果有人能让我知道我写的列是否不正确，我将不胜感激！

示例：

第4部分的内容超过了移动设备上第3部分的内容。

HTML：

 <!--Section 3-->
    <div id="content3">
        <section>
            <h1 class="text-center integration">Integrating</h1>
            <div class="container-fluid integration_background">
                <div class="row">
                    <div class="col-md-6 d-flex justify-content-center">
                        <ul class="integrations">
                            <li><img src="img/g_suite.png" class="pr-4">
                            </li>
                            <li><img src="img/_slack.png" class="pl-4 pr-4">
                            </li>
                            <li><img src="img/groupme.png" class="pl-4 pr-4">
                            </li>
                            <li> <img src="img/microsoft.png" class="pl-4">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!--Section 4 -->
    <div id="content4">
        <section>
            <h1 class="text-center">Pricing</h1>
            <br>
            <div class="container-fluid d-flex align-items-center" style="width: 75%;" id="price_container">
                <div class="row">
                    <div class="col-md-4 text-center">
                        <div class="card">
                            <div class="card-header">Educator</div>
                            <div class="card-body d-flex flex-column">
                                <img src="img/price_edu.png" class="img-fluid">
                                <h6 class="card-title">Use Wanzeru Ed</h6>
                                <hr>
                                <ul>
                                    <li>Free for one class</li>
                                    <li>Matches students in ideal teams</li>
                                    <li>Real-time feedback</li>
                                </ul>
                                <button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1; bottom:5px;">Get Quotes</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4  text-center">
                        <div class="card">
                            <div class="card-header">Individual</div>
                            <div class="card-body d-flex flex-column">
                                <img src="img/price_entur.png" class="img-fluid">
                                <h6 class="card-title">Hire Wanzeru to be your meeting (Find word)</h6>
                                <hr>
                                <ul>
                                    <li>$9.99/month</li>
                                    <li>Schedules unlimited meetings</li>
                                    <li>Facilitates unlimited meetings</li>
                                    <li>Takes meeting notes</li>
                                    <li>Assigns meeting tasks</li>
                                    <li>Sends reminders</li>
                                    <li>Digital badging for skills</li>
                                </ul>
                                <button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1;">$9.99/ month</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4  text-center">
                        <div class="card">
                            <div class="card-header">Entrepreneur</div>
                            <div class="card-body d-flex flex-column">
                                <img src="img/price_indi.png" class="img-fluid">
                                <h6 class="card-title">Hire Wanzeru for your business team</h6>
                                <hr>
                                <ul>
                                    <li>Schedules all team meetings</li>
                                    <li>Facilitates every meetings</li>
                                    <li>Takes meeting notes</li>
                                    <li>Assigns meeting tasks</li>
                                    <li>Sends reminders</li>
                                    <li>Digital badging for skills</li>
                                    <li>Provides real time progress reports of each team</li>
                                    <li>Fully compliant with each business data policy</li>
                                </ul>
                                <button type="button" class="btn btn-block mt-auto" style="background-color: #2F8EE1;">Get Quotes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

CSS：

#content3 {
    background-image: url("img/back2.png");
    background-size: cover;
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.integration {
    margin-top: -180px;
    color: #fff;
}

.integration_background {
    background-color: #fff;
    text-align: center;
    align-items: center;
    margin-top: 30px;
    padding: 10px 30px 10px 30px;
}

.vertical_line {
    width: 1px;
    height: 110%;
    background-color: grey;
    float: left;
}

#content4 {
    margin-top: -120px;
}

Answer 1

进一步检查后，我的引导程序列没有问题，这让我感到非常高兴。 :)就是这样-我的背景图像大小各不相同，不是完美的正方形，它们也是透明的。因此，当我添加文本并尝试确保其位于这些背景图像的顶部时，我不得不在几乎所有部分中更改页边距的顶部和底部。这导致响应侧全部抬起。

解决方案是我必须对手机和平板电脑尺寸进行大量媒体查询。不好玩，但必须完成。我真的希望这对以后的人有所帮助，因为这让我感到困惑。

Answer 2

尝试添加<br>标签。我不知道您的CSS是否内联，但是您需要<style>和</style>标签。也许这就是为什么对齐方式不正确？

Bootstrap 4在移动设备上无响应，列彼此重叠

2 个答案: